Mit video.js zum Abspielen von video-inline auf ios?

Ich versuche zu verwenden video.js um ein einheitliches video Haut über alle Plattformen hinweg. Der folgende code funktioniert für alles (chrome, firefox, ie, android), aber safari auf ios (noch nicht getestet, desktop-version von safari). Beim Versuch, das video abzuspielen ios-kicks über zu der default-video-player (quicktime?). Dies ist ein problem, weil ich bin auf der Suche entfernen Sie die video-Steuerelemente aus der Haut, so dass die Nutzer müssen das video zu sehen. Gibt es eine Möglichkeit zu verwenden video.js oder einem anderen web-plugin, um in der Lage sein, zu einem einheitlichen video-player-UI-über alle Plattformen hinweg oder wird dies nicht möglich sein, für 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>

InformationsquelleAutor commanderZiltoid | 2015-12-08

  1. 2

    In iOS 9 und 10 fügen Sie nun die playsinline - Attribut der video-tag, um es zu spielen inline. https://webkit.org/blog/6784/new-video-policies-for-ios/ Und ich habe gerade getestet und es funktioniert mit video.js

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

    InformationsquelleAutor stuyam

  2. 0

    Es ist ärgerlich, aber iOS noch nicht erlaubt, die inline-Wiedergabe eines video-element auf dem iPhone. Einige haben versucht zu spielen video in ein canvas-element statt wie bereits in den Antworten zu diese Frage.

    InformationsquelleAutor misterben

Schreibe einen Kommentar