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>

已更新为完整的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视频在移动浏览器中不起作用

1 个答案: