HTML5视频自动循环播放

您所在的位置：网站首页 › video循环播放属性 › HTML5视频自动循环播放

HTML5视频自动循环播放

2023-08-25 14:28| 来源: 网络整理| 查看: 265

知更鸟1966文章7029评论 2020年7月13日 16:50:26Web前端评论5.2K阅读模式

如果需要在网页中添加视频，可以参考下面的代码，支持MP4视频自动循环播放。

代码一，纯HTML5视频自动循环播放文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

不过火狐浏览器貌似默认禁止自动播放音频视频，需要到选项 → 隐私与安全 → 自动播放，设置允许音频和视频。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

如果不设置就可以自动播放，可以使用代码二。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

代码二，配合JS自动循环播放文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

HTML5视频自动循环播放 window.onload = function() { var local1=document.getElementById('videoID'); //获取，函数执行完成后local内存释放 local1.autoplay = true; // 自动播放 local1.loop = true; // 循环播放 local1.muted=true; // 关闭声音，如果为false,视频无法自动播放 if(local1.paused){ //判断是否处于暂停状态 local1.play(); //开启播放 } else { local1.pause(); //停止播放 } } function btn(){ var local=document.getElementById('videoID'); //获取，函数执行完成后local内存释放 if(local.paused){ //判断是否处于暂停状态 local.play(); //开启播放 } else { local.pause(); //停止播放 } }

不想显示播放控制按钮可以将controls="controls"删除。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

代码中外链的广告视频，加载可能有点慢，换成自己的MP4视频。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

其中：width:100%视频自动100%显示，vertical-align:middle用于消除视频下面的空隙。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

参数属性文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

如果使用 "autoplay"，则忽略该属性。

srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。文章源自知更鸟-https://zmingcx.com/html5-video-playback.html

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！

CSS把文字限制在圆形内

几个不太常用的CSS选择器

前端代码编辑器

文字大小为什么要用html {font-size: 62.5%;} 3 登录收藏 https://zmingcx.com/html5-video-playback.html 复制链接复制链接 weinxin

【本文地址】

HTML5视频自动循环播放

HTML5视频自动循环播放

今日新闻

推荐新闻