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 举报,一经查实,本站将立刻删除。

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

相关推荐

  • 抖音最新七大封号规则总结【详细讲解】

    哈喽,小伙伴们大家好,今天钱宇阳废话就不多说了,直接上干货,标题:抖音最新七大封号规则总结,以及抖音封号账号,内容,同质等等相关的各种干货,先说明一下,老司机直接飘过吧,主要是讲解给新手朋友们的哈! 第一:内容同质化,抄袭照搬 内容抄袭、完全照搬,还记得微商段子中那辆9u开头的一辆奔驰大G吗?,同一辆车摆在那个别墅门口找几十个女孩子轮流来拍,最后这辆车的车牌…

    2022年8月10日
  • 找工作最正规的平台(平台推荐和介绍)

    找工作最正规的平台(平台推荐和介绍) 在现代社会中,找工作已经成为许多人的重要任务之一。随着互联网的发展,越来越多的求职者开始利用各种在线平台来寻找合适的工作机会。本文将向您介绍一些目前市场上最正规可靠的求职平台,帮助您更好地找到理想的职位。 1. 拉勾网 拉勾网是中国领先的互联网招聘平台之一,专注于为IT从业者提供就业服务。它与许多知名的科技公司合作,提供…

    2023年9月15日
  • 六大常见网络安全威胁【经验之谈】

    很高兴又和小伙伴们见面了,这次郑宏忠主要整理了一些关于六大常见网络安全威胁的问题,以及网络安全威胁网络,设备,网络安全等等相关的各种干货,其实这个内容对于新手来说还是挺重要的,因为涉及面很大。如果你认真读了,一定会有所收获! 1、网络钓鱼 网络钓鱼是最近几年非常猖狂的一种攻击方式,有机构统计,每99封邮件中就有1封是网络钓鱼邮件。此外,将近30%的钓鱼邮件都…

    2022年9月1日
  • 2015年《广告法》详解【秒懂干货】

    很高兴又和各位见面啦!这次陈宇想和你们聊聊2015年《广告法》详解,以及广告法广告,广告法,未成年人等等相关的各种干货,精心为你准备的干货,通过这篇文章相信你能有所收货! 新广告法即将于2015年9月1日正式实施。这部被称为中国最严格的新广告法里亮点多多,对现行广告法的诸多不足之处进行了细致的修补,旨在规范企业推销商品和服务的过程,让消费者更有保障、更有安全…

    2022年9月29日
  • 品牌定位和品牌形象如何打造?(品牌定位和形象打造技巧分享)

    品牌定位和品牌形象如何打造? 品牌定位和品牌形象是品牌塑造的关键因素,对于企业的发展和市场竞争具有重要意义。下面分享一些品牌定位和形象打造的技巧。 1. 明确品牌定位 品牌定位是指让消费者对品牌有一个清晰的认知,区别于其他品牌。明确品牌定位需要从以下几个方面入手: * 确定目标客户:了解目标客户的年龄、性别、收入水平、消费习惯等,为品牌定位提供基础。* 确定…

    技术 2023年8月21日
  • 无需软件无需插件微信多开方法分享【详细介绍】

    美好的一天即将开始,下面就由笔者许哆莲来一起聊聊无需软件无需插件微信多开方法分享,还有关于微信多开插件,软件,步骤等等各种相关干货,其实这篇文章主要还是为新手朋友整理的,总的来说思路还是很重要! 现在微信多开越来越难了,基本都得靠软件或插件破解才行,这里分享一篇网友分享的DAT脚本微信多开方法。 首先先关闭微信,微信启动时存在监测是否已启动微信。 微信多开方…

    2022年8月17日