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

相关推荐

  • 一段代码轻松搞定被网站恶意镜像【一看就会】

    哈喽,小伙伴们大家好,今天杨筱晗说的这篇文章一段代码轻松搞定被网站恶意镜像,以及恶意镜像网站,站点,域名这些一系列的相关干货内容,认真阅读完,把我想表达的思路完全理解,相信你很快就可以掌握! 有时候你会发现,你在搜索引擎输入网站名称的时候,出来的网站信息是你们的,但是域名却是一个陌生的,这种情况可以基本确定网站被镜像了,那么究竟什么叫网站被镜像? 严谨一点的…

    技术 2022年10月20日
  • 如何利用外链平台提升网站排名(技巧和建议)

    在网站优化中,外链是提升网站排名的重要手段之一。通过合理利用外链平台,可以增加网站的权威性和流量,进而提升网站在搜索引擎上的排名。下面将为您介绍一些利用外链平台提升网站排名的技巧和建议。 1.选择高质量的外链平台 选择高质量的外链平台是提升网站排名的基础。这些平台通常有稳定的流量和较高的权威性,能够为您的网站带来更多的曝光机会。同时,高质量的外链平台也能提供…

    2023年8月25日
  • 怎么找人最快?这几种方法可以帮你(方法介绍和推荐)

    大家在生活中经常会遇到需要找人的情况,无论是找朋友聚会还是找业务合作伙伴,都希望能够尽快找到合适的人。那么,我们应该如何通过有效的方法来最快地找到所需的人呢?本文将介绍几种常用的方法并给出具体推荐。 1. 互联网搜索引擎 互联网搜索引擎是我们找人最常用的工具之一。通过输入姓名、关键词等相关信息,在搜索引擎上进行全面的搜索,可以快速找到目标人物的相关信息,比如…

    2023年9月13日
  • 购买服务器1核和2核是什么意思?区别是什么?【新手必看】

    小伙伴们大家好,今天朱慧娟给大家分析下关于购买服务器1核和2核是什么意思区别是什么的问题,还有关于购买服务器服务器,区别,网站这些的精品干货文章,既然来了就别走了,好好的静下心把这篇文章阅读完相信你会有一定的收获哦! 1核和2核区别是什么? 众所周知,CPU 是服务器的中央处理器,是计算机的“大脑”,更是衡量服务器性能的首要指标。而云服务器 1 核和 2 核…

    2022年12月2日
  • HTML使用clip-path制作地图【秒懂干货】

    美好的一天即将开始,下面就由笔者陈晨来一起聊聊HTML使用clip-path制作地图,以及HTML地图地图,区域,数据的相关内容干货,希望你们能通过这篇文章很好的掌握其中的技巧,下面我就来为大家全部一一解析! clip-path制作的地图是指地理上的地图,不是指网站地图!大天朝的地图想必每个中国人都知道,也经常见到。站长应该见得特别多了,特别是在检查网站速度…

    2022年9月12日
  • 百度广告联盟怎么赚钱?一天多少收入?【推荐干货】

    首先,秦梓帅感谢你能坚持经常过来关注我。下面我就来说说百度广告联盟怎么赚钱一天多少收入,以及关于百度广告联盟赚钱联盟,广告,网站的一系列相关内容,其实这篇文章主要还是为新手朋友整理的,总的来说思路还是很重要! 百度广告联盟怎么赚钱? 1、注册域名 想要挂百度联盟的广告,必须有一个网站,并且要求域名是正规ICP备案的网站,所以,先买域名,然后去管局备案,具体备…

    2022年10月3日