HTML5 视频无法在移动浏览器中播放

Question

HTML5 我的移动设备无法播放视频。尝试在我的移动浏览器上加载视频时，我遇到了几个问题。当我尝试删除控件时，视频本身并未显示在移动浏览器中。当我添加控件时，它加载但不使用 javascript play() 函数播放。所有情况它都适用于台式机，但我也需要在移动设备上使用相同的设备

我的html代码如下

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    width:100%;
    max-width:500px;
    height:auto;
}
#either-gif-or-video video {
    display: none;
}
 @media (-webkit-video-playable-inline) {
#either-gif-or-video img {
    display: none;
}
#either-gif-or-video video {
    display: initial;
}
}
</style>
<script>

    window.onload = function() {
        startPlayback();

    }

    function fallback(video)
    {
        alert(video);
    }


    var video;
  var canvas;

  function startPlayback()
  {
    if (!video) {
      video = document.createElement('video');
      video.src = 'https://mytestsite.com/myvideo.mp4';
      video.autoplay = true;
      video.loop = true;
      video.muted = true;
      video.playsinline = true;
      video.controls = true;
      video.addEventListener('playing', paintVideo);
    }
    var promise = video.play();
    if (promise !== undefined) {
     promise.then(_ => {
       //alert('Autoplay started!');
     }).catch(error => {
       //alert('Autoplay was prevented.');
       // Show a "Play" button so that user can start playback.
     });
    }
  }

  function paintVideo()
  {
    if (!canvas) {
      canvas = document.createElement('canvas');
      canvas.width = 400;//video.videoWidth;
      canvas.height = 200;//video.videoHeight;
      //document.body.appendChild(canvas);
      document.getElementById("videoID").appendChild(canvas);

    }

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    if (!video.paused)
      requestAnimationFrame(paintVideo);
  }

</script>
<body  onclick="startPlayback()">
<h2>autoplay</h2>
<div id="videoID"></div>
<button onclick="startPlayback()" id="my-link">Start Playback</button>
</body>
</html>

Answer 1

你不说问题是什么，但移动浏览器视频规则确实经常更改，因此最好查看最新视图。

以下是一个很好的来源，包含以下有效的示例，可用作您页面的基础：

https://webkit.org/blog/6784/new-video-policies-for-ios/

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

在撰写本文时（2021 年 2 月），自动播放的准则是：

< video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:

< video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.

< video muted> elements will also be allowed to autoplay without a user gesture.

If a < video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.

< video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.

< video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

完整 HTML5 代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Video Test</title>
</head>

<body>
  <h1>Video Test</h1>
  <video autoplay loop muted playsinline>
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
</body>

</html>

已使用 iPhone 7 和 iOS 11.2.6 进行测试，自动播放正确。

HTML5 视频无法在移动浏览器中播放

HTML5 video not working in mobile browsers

html

video

autoplay