Javascript – Using video.js to play video inline on ios

html5-videoiosjavascriptsafarivideo.js

I am trying to use video.js to maintain a consistent video skin across all platforms. The below code works for everything (chrome, firefox, ie, android) but safari on ios (haven't tested desktop version of safari). When attempting to play the video ios kicks over to it's default video player (quicktime?). This is a problem because I am looking to remove the video controls from the skin so that the user must watch the video. Is there a way to use video.js or another web plugin to be able to have a consistent video player UI across all platforms or will this not be possible for ios?

<html>

<head>
    <!--#include virtual="/assets/inc/headcontent.htm" -->


  <link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>


</head>
<body>

    <div class="row">

        <div class="col-xs-12 col-md-10 col-lg-8">

            <div class="">
                <video id="the_video" class="video-js" controls preload="auto">
                    <source src="videos/english.mp4" type='video/mp4'>
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>
            </div>

        </div>

    </div>


    <!--#include virtual="/assets/inc/footcontent.htm" --> 


  <script src="http://vjs.zencdn.net/5.3.0/video.js"></script>


  <script>

    var player = videojs("the_video", {}, function(){
      // Player (this) is initialized and ready.
    }).ready(function(){

        console.log(this.options()); //log all of the default videojs options

       // Store the video object
      var myPlayer = this, id = myPlayer.id();
      // Make up an aspect ratio
      var aspectRatio = 264/640; 

      function resizeVideoJS(){
        var width = document.getElementById(id).parentElement.offsetWidth;
        myPlayer.width(width).height( width * aspectRatio );

      }

      // Initialize resizeVideoJS()
      resizeVideoJS();
      // Then on resize call resizeVideoJS()
      window.onresize = resizeVideoJS; 
    });


  </script>

</body>
</html>

Best Answer

Starting in iOS 9 and above you can now add the playsinline attribute to the video tag to get it to play inline. https://webkit.org/blog/6784/new-video-policies-for-ios/ And I just tested and it works with video.js

<video class="video-js" poster="#" playsinline autoplay loop>
  <source src="#" type="video/mp4">
</video>