HTML5视频自动循环播放

知更鸟
知更鸟
知更鸟
1573
文章
6924
评论
2020年7月13日16:50:26 评论 187

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


HTML5视频自动循环播放

代码一,纯HTML5视频自动循环播放

<!DOCTYPE HTML>
<html>
<body>
<video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;">
	<source src="movie.ogg" type="video/ogg" />
	<source src="https://v.mifile.cn/b2c-mimall-media/71fa48c0e68fe732a3b7c28e1b33278d.mp4" type="video/mp4" />
</video>
</body>
</html>

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

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

代码二,配合JS自动循环播放

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML5视频自动循环播放</title>
 </head>
 <body>
	<video id="videoID" controls="controls" style="width:100%;vertical-align:middle;">
	  <source src="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4" type="video/mp4"/>
	</video>
 </body>
<script  type="text/javascript">
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();  //停止播放
	}
}
</script>
</html>

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

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

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

参数属性

autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。

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

srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。
weinxin
版权声明
本站原创文章转载请注明文章出处
HTTPS与HTTP相比更安全 Web前端

HTTPS与HTTP相比更安全

近几年,互联网发生着翻天覆地的变化,尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代,在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进下,互联网迎来了“HTTPS加密时代”,...
jQuery各版本下载大全 Web前端

jQuery各版本下载大全

jquery-2.0以上版本不再支持IE 6/7/8, 并不是最新的版本就最好的,而是根据您项目需求所适合的版本! 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) jquery-3.4.1...
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: