HTML5视频在移动浏览器中不起作用
HTML5视频无法在我的移动设备上运行。我在移动浏览器上加载视频时遇到了几个问题。 当我试图移除控件时，视频本身并没有显示在移动浏览器中。当我添加控件时，它使用javascript play（）函数加载但不播放。所有情况下，它在桌面上工作，但我需要在移动设备也一样 我的html代码如下HTML5视频在移动浏览器中不起作用,html,video,autoplay,Html,Video,Autoplay,HTML5视频无法在我的移动设备上运行。我在移动浏览器上加载视频时遇到了几个问题。 当我试图移除控件时，视频本身并没有显示在移动浏览器中。当我添加控件时，它使用javascript play（）函数加载但不播放。所有情况下，它在桌面上工作，但我需要在移动设备也一样 我的html代码如下 <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0
<!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>
录像带{
宽度：100%；
最大宽度：500px；
高度：自动；
}
#gif或视频{
显示：无；
}
@媒体（-webkit视频可在线播放）{
#gif或视频img{
显示：无；
}
#gif或视频{
显示：首字母；
}
}
window.onload=函数（）{
startPlayback（）；
}
功能回退（视频）
{
警报（视频）；
}
var视频；
var帆布；
函数startPlayback（）
{
如果（！视频）{
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（）；
如果（承诺！==未定义）{
承诺。然后（=>{
//警报（“自动播放已启动！”）；
}).catch（错误=>{
//警报（“自动播放被阻止”）；
//显示“播放”按钮，以便用户可以开始播放。
});
}
}
函数paintVideo（）
{
如果（！画布）{
canvas=document.createElement（'canvas'）；
canvas.width=400；//video.videoWidth；
canvas.height=200；//video.videoHeight；
//document.body.appendChild（画布）；
document.getElementById（“videoID”）.appendChild（画布）；
}
canvas.getContext（'2d'）.drawImage（视频，0，0，canvas.width，canvas.height）；
如果（！video.paused）
请求动画帧（paintVideo）；
}
自动播放
开始播放