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

相关推荐

  • 如何在b站上获得更多的收益(收益提升技巧与方法分享)

    如何在b站上获得更多的收益(收益提升技巧与方法分享) 在当今的互联网时代,视频分享平台如b站成为了广大网友分享和观看视频的重要场所。对于up主而言,如何在b站上获得更多的收益成为了他们最为关注的问题。本文将为大家分享一些在b站上获取更多收益的技巧和方法。 一、制作高质量的内容 在b站上获取更多的收益,首先需要制作高质量的内容。优质的内容不仅能吸引更多的观众,…

    2023年8月26日
  • IE浏览器默认仿真IE7模式访问网站,导致错乱的解决方法【一看就会】

    最近有很多朋友问朱宏羚关于IE浏览器默认仿真IE7模式访问网站,导致错乱的解决方法的问题,以及关于IE浏览器,仿真模式模式,浏览器,网站等等各种相关干货,希望你们能通过这篇文章很好的掌握其中的技巧,下面我就来为大家全部一一解析! IE仿真模式是什么? 大家都知道IE已经被谷歌淘汰了,最新的Microsoft Edge浏览器代替的IE浏览器,但是国内还是有非常…

    2022年7月26日
  • ANDROID FRAGMENT来回切换不刷新不销毁的最佳方法

    各位朋友大家好,今天给大家说下关于ANDROID FRAGMENT来回切换不刷新不销毁的最佳方法,因为前一段时间有很多朋友问我,于是我就准备写下这篇文章来统一告诉大家吧! 90%以上的App都会用到Fragment、那么切换Fragment就很常见了、一般情况下我们在项目中需要进行Fragment的切换、一直都是用replace()方法来替换Fragment…

    2022年6月14日
  • 最权威的大学排行榜公布,世界第一是哪所大学?(大学排行榜权威发布)

    最权威的大学排行榜公布,世界第一是哪所大学? 近年来,各种大学排行榜陆续发布,让人不禁疑惑,哪个排行榜最权威?最近,一份名为“QS世界大学排名”的排行榜引起了广泛关注,被认为是最权威的大学排名之一。那么,世界第一是哪所大学呢? QS世界大学排名 QS世界大学排名是由英国一家名为Quacquarelli Symonds的机构发布的,是全球最具影响力的大学排行榜…

    2023年9月16日
  • DDoS攻击防御方法实战【推荐干货】

    最近有很多朋友问王芳玲关于DDoS攻击防御方法实战的问题,还有关于DDoS攻击防御业务,目的,攻击者等等其他相关干货,希望你认真看完这篇文章后,能充分理解我想表达的意思。相信你很快就能掌握!你离大牛越来越近了! DDoS攻击是什么 DDoS攻击防御截图 DDoS攻击又称分布式拒绝服务攻击(DDoS攻击)是一种针对目标系统的恶意网络攻击行为,DDoS攻击经常会…

    2022年11月13日
  • 手机赚钱的优劣势分析及对比评测(优劣势分析与比较评测)

    随着科技的不断发展,手机赚钱已经成为了许多人关注的热门话题。越来越多的人利用手机通过各种方式来赚取额外的收入。本文将从优劣势的角度分析手机赚钱,并对不同的方式进行对比评测,以帮助读者更好地了解手机赚钱的现状和可行性。 一、手机赚钱的优势 1. 灵活性:手机赚钱具有很高的灵活性,用户可以根据自己的时间安排,选择合适的时间进行赚钱的任务,无论是在上班途中、闲暇时…

    2023年9月14日