html5 video on data-role="view"

8 posts, 0 answers
  1. Ace
    Ace avatar
    9 posts
    Member since:
    Feb 2012

    Posted 23 May 2012 Link to this post

    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.
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 May 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 12 Oct 2012 Link to this post

    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>


  5. Don
    Don avatar
    15 posts
    Member since:
    Apr 2011

    Posted 16 Jul 2013 Link to this post

    x
  6. Don
    Don avatar
    15 posts
    Member since:
    Apr 2011

    Posted 16 Jul 2013 Link to this post

    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!
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Jul 2013 Link to this post

    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!
  8. Don
    Don avatar
    15 posts
    Member since:
    Apr 2011

    Posted 17 Jul 2013 Link to this post

    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
  9. Don
    Don avatar
    15 posts
    Member since:
    Apr 2011

    Posted 17 Jul 2013 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready