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>
您没有说问题是什么，但是移动浏览器视频规则确实经常更改，因此最好检查最新视图。
以下是一个很好的来源，包含以下示例，该示例有效，可用作页面的基础：
- 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 月(，自动播放的指南是：
<视频自动播放>对于满足以下条件的元素，元素现在将采用自动播放属性：
- <视频中>如果元素的源媒体不包含音轨，则允许元素在没有用户手势的情况下自动播放。
- <视频静音>元素也将允许在没有用户手势的情况下自动播放。
- 如果<视频>元素获得音轨或在没有用户手势的情况下取消静音，则播放将暂停。
- <视频自动播放中>元素只有在屏幕上可见时才会开始播放，例如当它们滚动到视口中、通过 CSS 可见并插入到 DOM 中时。
- <视频自动播放中>如果元素变得不可见(例如滚动到视口之外(，元素将暂停。
完整的 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上进行了测试，并可以正确自动播放。