This is a migrated thread and some comments may be shown as answers.

html5 video on data-role="view"

7 Answers 313 Views
Application
This is a migrated thread and some comments may be shown as answers.
Ace
Top achievements
Rank 1
Ace asked on 24 May 2012, 03:25 AM
Hello,

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

Sort by
0
Kamen Bundev
Telerik team
answered on 24 May 2012, 08:09 AM
Hi Ace,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shawn
Top achievements
Rank 2
answered on 12 Oct 2012, 04:23 PM
Not sure where this thread has gone, but I am having a video problem as well.  My problem is not playing the video, but stopping the video.

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>


0
Don
Top achievements
Rank 1
answered on 16 Jul 2013, 08:48 PM
x
0
Don
Top achievements
Rank 1
answered on 16 Jul 2013, 08:49 PM
I have a kendo mobile app with a view that contains a listview.  In the list view are some items that contain HTML5 video tags.  They all play will on Android and iOS but I am having the following issues on iOS only.  When I'm scrolling the listview, scrolling works as long as I don't touch any part of the video to scroll.  If I do that then the whole page scrolls (header and footer) and not just the scroll area.  The other issue I have is in my footer and header I have some buttons.  If the scrollable area is scrolled in such a way that part of a video is directly below the footer, for example, then the button stops working.  I have to scroll the listview a little bit so that the video item is not positioned directly below the footer and then the button works as normal.

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!
0
Alexander Valchev
Telerik team
answered on 17 Jul 2013, 02:58 PM
Hi Don,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Don
Top achievements
Rank 1
answered on 17 Jul 2013, 07:21 PM
It seems if I added the attribute  data-use-native-scrolling="true" on my data-role="view" div then the view won't display at all
0
Don
Top achievements
Rank 1
answered on 17 Jul 2013, 08:53 PM
I ended up implementing a work-around.  I'm hiding the video tag and using a thumbnail placeholder.  On tap of the thumbnail i'm showing the video and playing it via script then on the ended event of the video i'm hiding the video again and so scrolling remains unaffected.
Tags
Application
Asked by
Ace
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Shawn
Top achievements
Rank 2
Don
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or