如果需要在网页中添加视频,可以参考下面的代码,支持MP4视频自动循环播放。

纯HTML5视频自动循环播放HTML>

不过火狐浏览器貌似默认禁止自动播放音频视频,需要到选项 → 隐私与安全 → 自动播放,设置允许音频和视频。

如果不设置就可以自动播放,可以使用代码二。

配合JS自动循环播放html>

HTML5视频自动循环播放

window.onload = function() {

var local1 = document.getElementById('videoID'); //获取,函数执行完成后local内存释放

local1.autoplay = true; // 自动播放

local1.loop = true; // 循环播放

local1.muted = true; // 关闭声音,如果为false,视频无法自动播放

if (local1.paused) { //判断是否处于暂停状态

local1.play(); //开启播放

} else {

local1.pause(); //停止播放

}

}

function btn() {

var local = document.getElementById('videoID'); //获取,函数执行完成后local内存释放

if (local.paused) { //判断是否处于暂停状态

local.play(); //开启播放

} else {

local.pause(); //停止播放

}

}

不想显示播放控制按钮可以将controls="controls"删除。

代码中外链的广告视频,加载可能有点慢,换成自己的MP4视频。

其中:width:100%视频自动100%显示,vertical-align:middle用于消除视频下面的空隙。

参数属性autoplayautoplay如果出现该属性,则视频在就绪后马上播放。

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

heightpixels设置视频播放器的高度。

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

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

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

srcurl要播放的视频的 URL。

widthpixels设置视频播放器的宽度。

Logo

一站式 AI 云服务平台

更多推荐