HTML5 视频在移动浏览器中不起作用答案

【问题标题】：HTML5 video not working in mobile browsersHTML5 视频在移动浏览器中不起作用
【发布时间】：2018-10-17 08:44:29
【问题描述】：

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>

【问题讨论】：

标签： html video autoplay

【解决方案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 月），自动播放指南为：

如果源媒体不包含音轨，

如果

完整的 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 上测试并正确自动播放。

【讨论】：

我的问题它只是在移动设备中显示一个空白页面，但是当我添加控件时它会显示视频（但我不需要控件，我需要在加载时自动播放）
以上示例将自动播放，无需控件。静音部分很重要——此时联合视频不会自动播放。上面的规则链接也涵盖了其他内容，但静音的内容值得强调。
应该可以 - 您能否分享一个指向您的页面的链接，并让我们知道您正在测试的设备（如果可能）？
我已使用您在链接中建议的新代码更新了我的问题，但现在仍在移动设备中工作。在移动设备中，当我单击按钮时它会起作用。除非用户触摸屏幕，否则移动设备似乎正在阻止自动播放。从我更新的代码中播放视频的任何替代选项？
你能分享我完整的 html 代码吗，如果可能的话，我会用我自己的值更新 mp4 路径。我只有 MP4 文件