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

相关推荐

  • 前端框架怎么选?【推荐干货】

    最近比较忙,今天周一诺又抽时间给大家带来了前端框架怎么选干货,以及前端框架框架,用户界面,组件等等各种一系列的相关干货,其实这篇文章主要还是为新手朋友整理的,总的来说思路还是很重要! Reat.js框架 Reat.js(react)是脸书推出的一个用来构建用户界面的JavaScript库。React是脸书用于构建反应式图形界面的JS库,已经用于构建ins和脸…

    技术 2022年8月15日
  • 游戏推广员行业的现状和发展趋势(行业现状和发展趋势分析)

    游戏推广员行业是随着游戏产业的迅速发展而兴起的,目前已经成为一个独立而又重要的行业。本文将从行业现状和发展趋势两个方面进行分析,并探讨未来游戏推广员行业的发展前景。 一、行业现状分析 当前,游戏产业正处于高速发展阶段,各类游戏层出不穷,市场竞争激烈。在这样的背景下,游戏推广员的角色变得十分重要。游戏推广员主要负责游戏的宣传推广,包括制定推广策略、开展线上线下…

    2023年9月18日
  • 高中生如何用手机赚钱?(赚钱方法介绍和推荐)

    高中生如何用手机赚钱?(赚钱方法介绍和推荐) 身处信息时代,手机已经成为人们生活中必不可少的工具之一。而对于手持智能手机的高中生们来说,如何利用手机赚取一些额外的收入呢?下面将介绍几种适合高中生的手机赚钱方法,帮助他们实现经济上的自我独立。 1. 在手机应用商店参与任务赚钱 在手机应用商店中,有很多可以参与任务赚钱的应用。这些应用会提供不同类型的任务,比如下…

    2023年9月25日
  • oa系统哪个品牌好?值得推荐的品牌有哪些(品牌推荐和介绍)

    OA系统是办公自动化系统(Office Automation System)的简称,在企业中广泛应用于各种办公管理工作。随着科技的发展,市面上涌现出了许多不同品牌的OA系统,那么哪个品牌的OA系统好呢?本文将为您推荐几个值得关注的品牌并进行介绍。 1. 金和软件 金和软件是国内领先的OA系统提供商之一。他们坚持自主创新,拥有强大的研发团队和技术实力,为客户提…

    2023年8月14日
  • 服务器DOS批处理清楚垃圾文件【详细介绍】

    哈喽,小伙伴们大家好,今天冯奕希说的这篇文章服务器DOS批处理清楚垃圾文件,以及关于批处理清楚垃圾文件,系统,程序这些一系列的精品相关干货,其实这篇文章主要还是为新手朋友整理的,总的来说思路还是很重要! 不知道各位站长使用的Windows系统服务器有没有遇到这样一个情况:C盘经常满,而且满的非常快,手动清理一次很快就满了,而且有些程序不认识又不敢删,本文要介…

    技术 2022年10月16日
  • 如何在购买二手车时避免被骗(购买技巧和建议)

    近年来,随着二手车市场的不断发展,越来越多的消费者选择购买二手车。然而,购买二手车时也要警惕被骗的风险。为了帮助广大消费者避免被骗,我们提供以下购买二手车的技巧和建议。 1.仔细检查车辆外观 在购买二手车时,首先要仔细检查车辆的外观。注意观察车身是否有划痕、凹陷、漆面起泡等问题。同时,还要检查车门、引擎盖等部位是否对称,避免购买事故车。 2.检查车辆内部设备…

    2023年8月29日