HTML5视频自动循环播放方法【详细介绍】

HI,小伙伴们你们好,今天何泽湘比较忙,抽个时间来说下关于HTML5视频自动循环播放方法,还有关于HTML5视频播放视频,属性,模板等一系列的内容,成功的路上不会一帆风顺,每一个成功的背后都有一个惊人的故事。

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

纯HTML5视频自动循环播放








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

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

配合JS自动循环播放




HTML5视频自动循环播放







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();//停止播放
}
}

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

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

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

参数属性

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

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

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

相关专题

HTML5

HTML5

2021-10-20 1106

HTML5专题为您整理收集本站全部关于HTML5相关内容,主要为HTML5模板分享下载,HTML5教程文章或视频教程分享,还有HTML5开发的源码下载等等….

  • HTML5微商货源网自适应pbootcms模板
    [2022-07-13]
  • HTML5响应式智能家居产品展示网站织梦模板
    [2022-07-06]
  • html5响应式网络工作室织梦网站模板
    [2022-06-25]
  • html5响应式网站建设开发织梦企业模板
    [2022-06-15]
  • HTML5高端滑动式家电维修上门服务企业模板
    [2022-06-08]

这篇文章的所有内容到这里就完了,不管如何,只要能帮到你我就非常开心了,看完了,如果你觉得HTML5视频自动循环播放方法【详细介绍】还不错的话记得帮忙点个赞哦,欢迎继续浏览本站,学习更多的知识!

本文发布者:站长老油条,不代表寂寞网立场,转载请注明出处:https://www.jimowang.com/p/5817.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 jimowangmail@126.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022年9月13日 09:21
下一篇 2022年9月13日 09:37

相关推荐

  • 个人站长做什么网站赚钱【详细介绍】

    HI,小伙伴们你们好,今天冯毅延比较忙,抽个时间来说下关于个人站长做什么网站赚钱,还有关于个人站长网站,站点,信息这些的相关干货文章,想要做好首先一定要把基本功练好了,否者是很难持续提升的。 个人、商家、企业做什么网站赚钱,这是许多人比较关注的话题。 以个人多年的观察经验来看,比较稳定的、靠谱的盈利网站通常分为信息站、内容站、服务站和广告站4类。 个人站长截…

    2022年9月4日
  • 小众女装品牌加盟的成本和利润分析(成本与利润预估)

    小众女装品牌加盟的成本和利润分析(成本与利润预估) 女装行业是一个竞争激烈的市场,许多人都有打造自己女装品牌的梦想。但是,作为一个小众女装品牌,加盟的成本和利润是每一个加盟者都需要考虑和预估的重要因素。 1. 加盟费和保证金: 加盟费是加盟商一次性向品牌方支付的费用,通常用于获得品牌的使用权和技术支持。不同品牌的加盟费有所不同,一些知名的品牌加盟费可能较高,…

    2023年9月9日
  • 503 Service Temporarily Unavailable错误的原因是什么

    503 Service Temporarily Unavailable错误是常见的Web服务器错误之一,它通常表示服务器暂时无法处理请求。这个错误可能会由于许多不同的原因而出现,例如服务器维护、资源不足或软件错误等。对于用户来说,这个错误可能会造成不便,因为他们无法访问所需的网页或使用相关服务。为了解决这个问题,以下是一些可能的步骤和注意事项。 1. 检查服…

    2023年8月12日
  • 四大直辖市城市竞争力排名分析(四大直辖市城市竞争力比较与评估)

    四大直辖市城市竞争力排名分析 北京、上海、天津、重庆,是中国的四大直辖市,也是中国的政治、经济、文化中心之一。四大直辖市的城市竞争力排名,一直是人们关注的焦点。2021年,四大直辖市的城市竞争力排名如何?未来四大直辖市的城市竞争力又将如何发展? 一、北京 作为中国的政治中心,北京市在城市竞争力方面排名第一。2021年,北京市的GDP为2429.6亿元,人均G…

    技术 2023年8月21日
  • IIS建站操作手册(基础教程)【一看就会】

    很高兴又和大家见面了,今天何海龙来和大家聊一聊IIS建站操作手册(基础教程),以及IIS操作手册,基础教程,网站等等各种一系列的相关干货,既然来了就别走了,好好的静下心把这篇文章阅读完相信你会有一定的收获哦! 1、选择网站,右键添加网站 2、网站名,主机名可以直接填域名,物理路径根据具体情况定,你服务器里面设置的web,端口随意设置,一般为80开始,一个站一…

    2022年9月24日
  • 服务器配置另一个选择AppNode【一看就会】

    大家好,今天沈嘉琪给大家准备的干货是服务器配置另一个选择AppNode,还有关于AppNode服务器,功能,网站这些的内容,既然来了就别走了,好好的静下心把这篇文章阅读完相信你会有一定的收获哦! AppNode截图 appnode的功能比宝塔多几倍,基本上你想到的功能他有,你没想到的功能他也有 对重度用户非常友好,因为啥功能都有而且免费。 缺点:就是设置比较…

    2022年12月13日