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年12月17日
  • 1w粉丝快手号的替代方案推荐(快手号替代方案分析与推荐)

    1w粉丝快手号的替代方案推荐(快手号替代方案分析与推荐) 快手号替代方案分析与推荐 随着社交媒体的不断发展,越来越多的用户开始拥有自己的快手号。然而,由于各种原因,有些用户可能需要寻找替代方案来替代自己的快手号。本文将为您分析一些替代方案,并推荐适合您的替代方案。 替代方案一:微信公众号 1. 优势:微信公众号具有较为完善的功能,如粉丝管理、内容推送等。2….

    技术 2023年8月12日
  • 163 CN2 CN2GIA线路什么意思【最新推荐】

    美好的一天从这里开始啦!今天笔者烁福来说说163 CN2 CN2GIA线路什么意思,以及163,CN2,CN2GIA机房,电信,带宽的一系列相关干货,如果你是老司机,你可能觉得很简单,但如果你是新手,你可能就不这么想了。 163骨干网 163骨干网也就是我们通常说的AS4134接入的带宽,是中国电信的骨干网,也就是我们经常看到202.97开头的路由,此网络负…

    2022年11月29日
  • 登录功能写成这样,根本不需要密码就能拿到flag【秒懂干货】

    美好的一天从这里开始啦!今天笔者秦端武来说说登录功能写成这样,根本不需要密码就能拿到flag,以及flag密码,后面,语句这些一系列的相关干货内容,认认真真阅读完,若能把我想表达的全部理解,相信你已经离大牛不远了哈! 很多网站都有登录功能,现在的各种CTF比赛为了考察参加选手对知识点的认识也都会出现这种所谓的“万能密码”,首先我们来看这个登录页面: 打开网站…

    技术 2022年12月3日
  • 2020新版狗爹godaddy域名解析教程(图文)【详细介绍】

    很高兴又和大家见面了,今天冯光来和大家聊一聊2020新版狗爹godaddy域名解析教程(图文),还有狗爹,godaddy,域名解析新版,教程,图文等等等各种相关干货内容,主要就是想给大家提供一个思路分享给大家,毕竟也是经过一系列总结过的哈! 前言 狗爹godaddy控制面板是英文的,就算用的中文,翻译的也很差,很多文字看不明白,冯光今年买了个域名,就顺便写一…

    2022年11月5日 技术
  • 如何在朋友圈里让自己的文字脱颖而出(技巧和建议)

    如何在朋友圈里让自己的文字脱颖而出(技巧和建议) 当今社交媒体时代,朋友圈已经成为与朋友分享生活点滴的主要平台之一。然而,在众多朋友圈动态中,如何使自己的文字能够脱颖而出,吸引更多人的注意力,让你的朋友们对你的内容感兴趣?以下是一些可以帮助你实现这一目标的技巧和建议。 1. 简洁明了 朋友圈是短暂的信息传递平台,人们倾向于迅速浏览内容而非长篇大论。因此,保持…

    2023年8月28日