菜鸡源码,专注精品下载!
当前位置:首页 > 建站教程 > 使用技巧

HTML5视频自动循环播放方法

发布时间:2024-01-04  栏目:使用技巧   浏览:   分类:html教程

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

纯HTML5视频自动循环播放

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

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

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

配合JS自动循环播放

<!doctypehtml><html><head><metacharset="UTF-8"><title>HTML5视频自动循环播放</title></head><body><videoid="videoID"controls="controls"style="width:100%;vertical-align:middle;"><sourcesrc="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4"type="video/mp4"/></video></body><scripttype="text/javascript">window.onload=function(){varlocal1=document.getElementById('videoID');//获取,函数执行完成后local内存释放local1.autoplay=true;//自动播放local1.loop=true;//循环播放local1.muted=true;//关闭声音,如果为false,视频无法自动播放if(local1.paused){//判断是否处于暂停状态local1.play();//开启播放}else{local1.pause();//停止播放}}functionbtn(){varlocal=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设置视频播放器的宽度。 相关专题
评论
使用技巧
建站知识
使用技巧
调试安装
运营推广