I'm using the beta version of kendoui and i've made this code:
<div data-role='view'>
<video>
<source src="video.mp4" type="video/mp4" />
</video>
</div>
this code works perfectly on my computer browsers like (chrome,safari, firefox). The problem is, it wont work on my ipad safari.
is this a bug or my mistake?
really having a trouble here. hoping for your response. thanks.
7 Answers, 1 is accepted
Seems iOS have troubles rendering video and audio tags on a 3D transformed element. Try setting a class to the View and then add a rule like this to your project (after the loaded CSS files):
.km-ios,
.km-ios .myClass,
.km-ios .myClass .km-scroll-container
{
-webkit-transform: none;
}
All the best,
Kamen Bundev
the Telerik team

Here is the code for the page and trying to pause the video is not working. I have tried onHide, capturing a back event and so forth and I keep getting in valid function call when it hits the pause button. This works fine in Chrome and etc.
<html>
<head>
<title></title>
<meta name="settings" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
</head>
<body>
<div data-role="view" data-transition="slide" data-title="Locations Training" id="locationstraining" data- hide="onLTHide">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" class="nav-button" data-align="right" data-icon="add" data-click="onLTBack"></a>
</div>
</header>
<h1 class="auto-style10">
Training Video for Locations
</h1>
<video id="LTVideo" height="640" class="videodisplay" controls="controls"
src="../shared/multimedia/video/MyLocationsTraining.mp4" poster="../shared/multimedia/image/MyLocationsTraining.png">
</video>
</div>
<style scoped>
#locationstraining .videodisplay
{
float: left;
width: 100%;
height: 100%
margin: 0px 0px 5px 0px;
}
#locationstraining .auto-style10
{
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
text-align: center;
}
</style>
<script>
function onLTHide(e)
{
}
function onLTBack(e)
{
try
{
var mediaElement = document.getElementById("LTVideo");
mediaElement.pause();
}
catch(e)
{
alert(e.message);
}
}
</script>
</body>
</html>


I tried the CSS you suggested hoping that was the reason for my video issues but that didn't resolve them. This is kind of a hard topic to Google since a million false positives come up for the search terms.
Any suggestions would be great appreciated!
Please try to turn on native scrolling of the View and check whether the problem still persists.
Thank you in advance.
Regards,
Alexander Valchev
Telerik

