Explication détaillée du terminal mobile vidéo HTML5

Cet article présente principalement une brève discussion sur le terminal mobile vidéo html5 qui comble les pièges. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Cet article présente le terminal mobile vidéo html5 en comblant les pièges et le partage avec tout le monde. Les détails sont les suivants :

<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模式
-->

Lecture automatique

.

Définition de l'attribut de lecture automatique

<video autoplay></video>

Dans les navigateurs mobiles

Cependant, dans de nombreux navigateurs mobiles, le fonctionnement réel de l'utilisateur est requis (touchend, événements standard tels que les événements click, doubleclick ou keydown) déclenchent l'appel à video.play() pour lire automatiquement l'audio et la vidéo.

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

Dans WeChat,

peut également déclencher video.play() dans wx.ready()

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

Lecture en ligne

Définissez l'attribut webkit-playsinlineplaysinline

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

Lors de la lecture d'une vidéo dans iOS Safari et certains navigateurs Android, la vidéo ne peut pas être lue dans la page h5, le le système reprendra automatiquement la vidéo

Si vous devez lire la vidéo dans la page h5, vous devez ajouter webkit-playsinline à la balise vidéo. Après iOS10, vous devez ajouter playinline. ajoutez ces deux attributs en même temps. Dans le même temps, l'application doit prendre en charge ce mode

webview.allowsInlineMediaPlayback = YES;

Ios mobile QQ et WeChat prennent en charge ce mode, mais Android WeChat raccroche

Android WeChat

Le navigateur intégré d'Android WeChat utilise le noyau Tencent X5 et ne suit pas la norme X5web. L'un d'eux est la vidéo forcée en plein écran. Une fois la vidéo jouée, les propres recommandations vidéo de QQ apparaîtront

On dit qu'il a une liste blanche et que les ressources vidéo de la liste blanche ne seront pas en plein écran. Mais Tencent ne peut plus ajouter de contenu à la liste blanche. Urinaire, pas de solution. . . . . .

Il existe actuellement une solution, qui consiste à utiliser h5 Canvas pour lire une vidéo

Canvas pour lire une vidéo

Les pièges rencontrés lors de l'utilisation de Canvas : la vidéo doit être ajoutée avec l'attribut x5-video-player-type="h5", sinon le terminal mobile se bloquera et ne pourra pas lire la vidéo. Personnellement, je pense que c'est parce que la vidéo est reprise.

<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>

Enfin, j'ai découvert que bien que Canvas soit utilisé pour lire des vidéos, Android WeChat peut bloquer les vidéos recommandées après la lecture de la vidéo en plein écran. Mais il n’existe aucun moyen d’éviter le problème du plein écran lors de la lecture vidéo. Obtenez toujours la liste blanche des méchants. Déposez des plaintes. . . . . . . . . . . . . . . .
Ce qui est encore plus ennuyeux, c'est que je n'ai pas trouvé de moyen de déclencher la sortie plein écran via js.

Problème d'écran noir iOS

ios Lors de la lecture d'une vidéo, un écran noir apparaîtra brièvement puis s'affichera normalement.

Solution :

Couvrez un p au-dessus de la vidéo et remplissez-la avec une image pour créer l'illusion de chargement avant la lecture. Ensuite, écoutez la mise à jour de l'heure de l'événement et supprimez ce "bloc p" lorsqu'il y a une image dans la lecture vidéo

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

Méthodes et propriétés multimédias

HTMLVideoElement et HTMLAudioElement sont tous deux hérités de HTMLMediaElement

// 媒体错误
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"); //音量改变

Recommandations associées :

Comment assurer la compatibilité du navigateur pour les vidéos HTML5

Problèmes avec lecture vidéo mobile Résumé du cas

Brève description des paramètres et attributs de la balise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!