Ausführliche Erläuterung des mobilen HTML5-Videoterminals

Dieser Artikel führt hauptsächlich eine kurze Diskussion über das Ausfüllen von Fallstricken durch HTML5-Videoterminals ein. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

In diesem Artikel wird das mobile HTML5-Videoterminal vorgestellt, die Fallstricke ausgeräumt und mit allen geteilt. Die Details sind wie folgt:

<video id="video" 
  style="object-fit:fill" 
  autoplay
  webkit-playsinline 
  playsinline 
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  src="video.mp4" />
</video>
<!--
  object-fit: fill   视频内容充满整个video容器
  poster:"img.jpg" 视频封面
  autoplay： 自动播放
     auto - 当页面加载后载入整个视频
     meta - 当页面加载后只载入元数据
     none - 当页面加载后不载入视频

  muted：当设置该属性后，它规定视频的音频输出应该被静音

  webkit-playsinline playsinline:   内联播放

  x5-video-player-type="h5" :  启用x5内核H5播放器
  x5-video-player-fullscreen="true"  全屏设置。ture和false的设置会导致布局上的不一样
  x5-video-orientation="portraint" ：声明播放器支持的方向，可选值landscape 横屏,portraint竖屏。
                                     默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，
                                     但是这个属性需要x5-video-player-type开启H5模式
-->

Automatische Wiedergabe

Legen Sie das Autoplay-Attribut fest

<video autoplay></video>

in mobilen Browsern

In vielen mobilen Browsern ist jedoch die tatsächliche Bedienung des Benutzers erforderlich (Touchend, Standardereignisse wie Klick-, Doppelklick- oder Keydown-Ereignisse) lösen den Aufruf von video.play() aus, um Audio und Video automatisch abzuspielen.

 dom.addEventListener('click', function () {
   video.play()
})

In WeChat kann

auch video.play() in wx.ready() auslösen

wx.ready(function () {
  video.play()
})

Inline-Wiedergabe

Setzen Sie das Attribut webkit-playsinline spieltinline

<video id="video" webkit-playsinline playsinline /></video>

Beim Abspielen eines Videos in iOS Safari und einigen Android-Browsern kann das Video nicht auf der h5-Seite abgespielt werden Das System übernimmt das Video automatisch.

Wenn Sie das Video auf der h5-Seite abspielen müssen, müssen Sie webkit-playsinline zum Video-Tag hinzufügen. Es wird empfohlen, dies zu tun Fügen Sie diese beiden Attribute gleichzeitig hinzu. Gleichzeitig muss die App diesen Modus unterstützen

webview.allowsInlineMediaPlayback = YES;

Sowohl iOS Mobile QQ als auch WeChat unterstützen diesen Modus, aber Android WeChat legt auf

Android WeChat

Der integrierte Browser von Android WeChat verwendet den Tencent X5-Kernel und folgt nicht dem X5web-Standard. Einer davon ist das erzwungene Vollbildvideo. Nachdem das Video abgespielt wurde, werden QQs eigene Videoempfehlungen angezeigt.

Es wird gesagt, dass es eine Whitelist gibt und die Videoressourcen in der Whitelist nicht im Vollbildmodus angezeigt werden. Aber Tencent kann nicht mehr zur Whitelist hinzufügen. Urin, keine Lösung. . . . . .

Derzeit gibt es eine Lösung, die darin besteht, h5-Canvas zum Abspielen von Videos zu verwenden

Canvas zum Abspielen von Videos

Die Fallstricke bei der Verwendung von Canvas: Dem Video muss das Attribut x5-video-player-type="h5" hinzugefügt werden, sonst friert das mobile Endgerät ein und kann das Video nicht abspielen. Ich persönlich denke, das liegt daran, dass das Video übernommen wurde.

<p class="wrapper">
  <video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
  <canvas id="canvas"></canvas>
</p>
<script>
  var video = document.querySelector(&#39;#video&#39;)
  var canvas = document.querySelector(&#39;#canvas&#39;)
  var wrapper = canvas.parentNode
  var width = wrapper.offsetWidth
  var height = wrapper.offsetHeight
  var ctx = c.getContext(&#39;2d&#39;)
  var time = null
  canvas.width = width
  canvas.height = height

  canvas.addEventListener(&#39;click&#39;, function () {
    video.play()
  })

  video.addEventListener(&#39;play&#39;, function () {
      time = window.setInterval(function () {
        ctx.drawImage(v, 0, 0, width, height);
      }, 20);
  }, false);

  video.addEventListener(&#39;pause&#39;, function () {
      window.clearInterval(time);
  }, false);

  video.addEventListener(&#39;ended&#39;, function () {
      window.clearInterval(time);
  }, false);
</script>

Schließlich habe ich herausgefunden, dass Android WeChat empfohlene Videos blockieren kann, nachdem das Vollbildvideo abgespielt wurde, obwohl Canvas zum Abspielen von Videos verwendet wird. Es gibt jedoch keine Möglichkeit, das Vollbildproblem während der Videowiedergabe zu deaktivieren. Bekomme immer noch die böse weiße Liste. Machen Sie Beschwerden. . . . . . . . . . . . . . . .
Was noch ärgerlicher ist, ist, dass ich keine Möglichkeit gefunden habe, das Beenden im Vollbildmodus über js auszulösen.

Problem mit dem schwarzen Bildschirm von iOS

ios Beim Abspielen eines Videos erscheint kurzzeitig ein schwarzer Bildschirm und wird dann normal angezeigt.

Lösung:

Bedecken Sie ein p über dem Video und füllen Sie es mit einem Bild, um die Illusion zu erzeugen, dass es vor der Wiedergabe geladen wird. Hören Sie sich dann das Ereignis timeupdate an und entfernen Sie diesen „p-Block“, wenn in der Videowiedergabe ein Bild vorhanden ist

video.addEventListener('timeupdate', function(){
  if(video.currentTime > 0.1){
      posterImg.hidden();
  }
})

Medienmethoden und -eigenschaften

HTMLVideoElement und HTMLAudioElement werden beide von HTMLMediaElement geerbt

// 媒体错误
MediaObj.error; //null:正常
MediaObj.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//媒体当前状态
MediaObj.currentSrc; //返回当前资源的URL
MediaObj.src = value; //返回或设置当前资源的URL
MediaObj.canPlayType(type); //是否能播放某种格式的资源
MediaObj.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
MediaObj.load(); //重新加载src指定的资源
MediaObj.buffered; //返回已缓冲区域，TimeRanges
MediaObj.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态
MediaObj.readyState;//1:HAVE_NOTHING 
                    //2:HAVE_METADATA 
                   //3.HAVE_CURRENT_DATA 
                  //4.HAVE_FUTURE_DATA 
                 //5.HAVE_ENOUGH_DATA
MediaObj.seeking; //是否正在seeking

//回放状态
MediaObj.currentTime = value; //当前播放的位置，赋值可改变位置
MediaObj.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
MediaObj.duration; //当前资源长度 流返回无限
MediaObj.paused; //是否暂停
MediaObj.defaultPlaybackRate = value;//默认的回放速度，可以设置
MediaObj.playbackRate = value;//当前播放速度，设置后马上改变
MediaObj.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
MediaObj.seekable; //返回可以seek的区域 TimeRanges
MediaObj.ended; //是否结束
MediaObj.autoPlay; //是否自动播放
MediaObj.loop; //是否循环播放
MediaObj.play(); //播放
MediaObj.pause(); //暂停

//视频控制
MediaObj.controls;//是否有默认控制条
MediaObj.volume = value; //音量
MediaObj.muted = value; //静音

//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

//【★★★**相关事件**★★★】
//事件分发
var eventTester = function(e){
    Media.addEventListener(e,function(){
        console.log((new Date()).getTime(),e)
    },false);
}
//事件监听
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

Verwandte Empfehlungen:

So erreichen Sie Browserkompatibilität für HTML5-Videos

Probleme bei der mobilen Videowiedergabe Fallzusammenfassung

Kurze Beschreibung der Parameter und Attribute des 39000f942b2545a5315c57fa3276f220

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des mobilen HTML5-Videoterminals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!