Using video.js to play video inline on ios?

javascript ios safari html5-video video.js

13,508

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>

13,508

Author by

whitwhoa

Does it work? Is it maintainable? Is it scalable? Is it optimized?

Updated on June 23, 2022

Comments

whitwhoa almost 2 years

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>