html5如何实现自动播放视频

发布网友 发布时间：2022-04-19 21:50

我来回答

共7个回答

热心网友 时间：2022-04-19 10:00

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

热心网友 时间：2022-04-19 11:18

HTML5 是下一代的 HTML， 提供了展示视频的标准，规定了一种通过 video 元素来包含视频的标准方法。

纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。

这样做主要是为了防止不必要的自动播放浪费流量。

以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放

XML/HTML Code复制内容到剪贴板

function autoPlayMusic() {   

/* 自动播放音乐效果，解决浏览器或者APP自动播放问题 */   

function musicInBrowserHandler() {   

musicPlay(true);   

document.body.removeEventListener('touchstart', musicInBrowserHandler);   

}   

document.body.addEventListener('touchstart', musicInBrowserHandler);   

/* 自动播放音乐效果，解决微信自动播放问题 */   

function musicInWeixinHandler() {   

musicPlay(true);   

document.addEventListener("WeixinJSBridgeReady", function () {   

musicPlay(true);   

}, false);   

document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);   

}   

document.addEventListener('DOMContentLoaded', musicInWeixinHandler);   

}   

function musicPlay(isPlay) {   

var media = document.getElementById('myMusic');   

if (isPlay && media.paused) {   

media.play();   

}   

if (!isPlay && !media.paused) {   

media.pause();   

}   

}  

Video有以下的属性。

height      pixels     设置视频播放器的高度。

loop       loop       如果出

现该属性，则当媒介文件完成播放后再次开始播放。

preload     preload     如果出现该属性，则视频在页面加载时进行加载，并预备播放。

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。

controls    controls    如果出现该属性，则向用户显示控件，比如播放按钮。

如果使用 "autoplay"，则忽略该属性。

src              url    要播放的视频的 URL。

width           pixels    设置视频播放器的宽度。

其中，如果想要实现自动播放，可以在Video里面加上autoplay属性就可以了。

热心网友 时间：2022-04-19 12:52

HTML5 是下一代的 HTML， 提供了展示视频的标准，规定了一种通过 video 元素来包含视频的标准方法。 

Video有以下的属性。

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。    

controls     controls    如果出现该属性，则向用户显示控件，比如播放按钮。    

height        pixels    设置视频播放器的高度。    

loop           loop    如果出现该属性，则当媒介文件完成播放后再次开始播放。    

preload      preload    如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src              url    要播放的视频的 URL。    

width           pixels    设置视频播放器的宽度。

热心网友 时间：2022-04-19 14:44

HTML5 是下一代的 HTML， 提供了展示视频的标准，规定了一种通过 video 元素来包含视频的标准方法。

Video有以下的属性。

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。    

controls     controls    如果出现该属性，则向用户显示控件，比如播放按钮。    

height        pixels    设置视频播放器的高度。    

loop           loop    如果出现该属性，则当媒介文件完成播放后再次开始播放。    

preload      preload    如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src              url    要播放的视频的 URL。    

width           pixels    设置视频播放器的宽度。    

其中，如果想要实现自动播放，可以在Video里面加上autoplay属性就可以了。以下是例子。

热心网友 时间：2022-04-19 16:52

热心网友 时间：2022-04-19 19:16

 html5视频播放 - https://21xrx.com/full_stack/Html/html5_video.html

热心网友 时间：2022-04-19 21:58