HTML5视频自动循环播放 |
您所在的位置：网站首页 › 网页视频自动播放下一个代码 › HTML5视频自动循环播放 |
HTML5视频自动循环播放
|
如果需要在网页中添加视频，可以参考下面的代码，支持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文章源自知更鸟-https://zmingcx.com/html5-video-playback.html |
【本文地址】
今日新闻 |
推荐新闻 |