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

相关推荐

  • IDEA编辑器配置入门教程(图文)【经验之谈】

    小伙伴们大家好,今天褚崎珍给大家分析下关于IDEA编辑器配置入门教程(图文)的问题,以及关于IDEA编辑器快捷键,入门教程,背景图片等等各种相关干货,这篇文章对新手朋友来说是比较重要的,因为涉及到各个方面,阅读完你一定能有所收获! 一 基本设置 1.设置IDEA背景图片,file->settings->keymap,也可以ctrl+alt+s快速…

    2022年8月7日
  • 品牌塑造的六个步骤详解(品牌塑造流程图解)

    品牌塑造的六个步骤详解 品牌塑造是企业在市场竞争中重要的战略之一,通过正确的品牌塑造可以提升企业品牌价值和市场竞争力。本文将通过六个步骤详细解析品牌塑造的过程。 1. 确定品牌定位 品牌定位是品牌塑造的第一步,是指在消费者心中建立一个独特的品牌形象,让品牌在市场竞争中脱颖而出。为了确定品牌定位,需要先分析市场需求、竞争对手和目标客户,从而找到品牌的差异化优势…

    技术 2023年8月21日
  • Iconfont阿里巴巴图标使用方法【详细介绍】

    HI,小伙伴们你们好,今天秦美慧比较忙,抽个时间来说下关于Iconfont阿里巴巴图标使用方法,以及阿里巴巴图标使用方法图标,使用方法,矢量相关的问题,其他的废话在这里我也不说了,我们直接来进入正题吧! 直接上阿里巴巴图标使用教程,废话不啰嗦,Iconfont网站介绍看下面这篇介绍。 相关信息 阿里巴巴IconFont矢量字体图标库在线工具 在线工具 搞前端…

    2022年9月4日 技术
  • WDCP服务器安装SSL证书实现HTTPS网址配置方法【推荐干货】

    很高兴又和各位见面啦!这次何引琪想和你们聊聊WDCP服务器安装SSL证书实现HTTPS网址配置方法,还有关于SSL证书配置方法证书,端口,面板这些的相关干货文章,其实这篇文章主要还是为新手朋友整理的,总的来说思路还是很重要! WDCP面板环境,给某个站点添加SSL证书,实现HTTPS网址访问。在过去的几篇文章中,分享过不少在Linux VPS中对应的WEB环…

    技术 2022年12月16日
  • 如何合理规划和利用赚来的零花钱(规划技巧和建议)

    如何合理规划和利用赚来的零花钱(规划技巧和建议) 引言 对于许多人来说,零花钱是通过辛勤工作或其他收入来源得到的一笔宝贵资金。因此,合理规划和利用这些零花钱至关重要。本文将分享一些规划技巧和建议,帮助你更好地管理和利用自己赚来的零花钱。 1. 设定明确的目标 首先,明确你的目标非常重要。你可能希望用零花钱购买某样特定的物品,也可能想节省起来以备不时之需。无论…

    2023年8月25日
  • 如何找到已经失去联系的旧同学或老同事(寻人技巧和建议)

    如何找到已经失去联系的旧同学或老同事(寻人技巧和建议) 无论是因为长时间没有联系,亦或是电话号码、地址等联系方式发生改变,我们常常会遇到难以找到已经失去联系的旧同学或老同事的情况。然而,在如今互联网和社交媒体的时代,我们有许多工具和技巧可供使用,帮助我们重新与他们取得联系。下面是一些寻找失去联系的旧同学或老同事的技巧和建议。 1. 利用社交媒体平台 社交媒体…

    2023年8月30日