如何在网页中自动播放视频？ 20
是在网页中插入视频，并将网页和视频都上传后别人访问该网页时视频能自动播放 展开
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属性就可以了。
|
广告 您可能关注的内容 |
