Skip to main content
Participant
September 24, 2015
Question

Can you provide a recommendation regarding what is the best video player to deploy on our Web sever to provide our viewers the most consistent view of our Captivate published HTML5 MP4 videos?

  • September 24, 2015
  • 1 reply
  • 221 views

Can you provide a recommendation regarding what is the best video player to deploy on our Web sever to provide our viewers the most consistent view of our Captivate published HTML5 MP4 videos?

    This topic has been closed for replies.

    1 reply

    TLCMediaDesign
    Inspiring
    September 24, 2015

    Honestly I would use YouTube and use the iFrame API, the only one that YouTube still supports.

    YouTube takes care of all of the compression and serves the file type needed for the browser.

    The script below is the entire HTML page. It is named with the YouTube video ID and a description of the video so you can keep track.

    For example: nKdI6HJzeeY_PromoVideo.html

    It strips the PromoVideo.html and plays the video.

    Needs to be on a server to work.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>YouTube</title>
    <style type="text/css">
    body {
    background-color: #FFF;
    }
    </style>
    <script>
        function getVideo()
        {
            var url = decodeURIComponent( window.location.pathname );
            var filename = url.substring( url.lastIndexOf('/') + 1 );
      var n = filename.lastIndexOf( '_' );   
      vid = filename.substr( 0, n );
      return vid;
        }
    </script>
    </head>

    <body>
    <div id="player"></div>
    <script>
            var tag = document.createElement( 'script' );
            tag.src = "//www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName( 'script' )[0];
            firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );

            var player;
            var myVideo = getVideo();

            function onYouTubeIframeAPIReady()
            {
                player = new YT.Player('player',
                {
                    height  : '390',
                    width   : '640',
                    autoplay: '1',
                    videoId : myVideo,
                    events  :
                    {
                              'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady( event )
            {
                var iOS = /(iPad|iPhone|iPod|Android)/g.test( navigator.userAgent );
      
                if ( !iOS )
                {
                    event.target.playVideo();
                }
            }

            function onPlayerStateChange( event )
            {
                if ( event.data == YT.PlayerState.ENDED )
                {
                    event.target.cueVideoById( myVideo, 0, 'hd720' );
                }
            }
        </script>
    </body>
    </html>