经验分享

HTML5视频自动循环播放方法

精准像素 2020-08-21 人阅读

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

纯HTML5视频自动循环播放

<!DOCTYPE HTML>
<html>
<body>
<video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;">
<source src="movie.ogg" type="video/ogg" />
<source src="https://v.mifile.cn/b2c-mimall-media/71fa48c0e68fe732a3b7c28e1b33278d.mp4" type="video/mp4" />
</video>
</body>
</html>

不过火狐浏览器貌似默认禁止自动播放音频视频,需要到选项 → 隐私与安全 → 自动播放,设置允许音频和视频。

如果不设置就可以自动播放,可以使用代码二。

配合JS自动循环播放

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5视频自动循环播放</title>
</head>
<body>
    <video id="videoID" controls="controls" style="width:100%;vertical-align:middle;">
        <source src="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4" type="video/mp4" />
    </video>
</body>
<script type="text/javascript">
    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(); //停止播放
        }
    }
</script>
</html>

不想显示播放控制按钮可以将controls="controls"删除。

代码中外链的广告视频,加载可能有点慢,换成自己的MP4视频。

其中:width:100%视频自动100%显示,vertical-align:middle用于消除视频下面的空隙。

参数属性

autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。

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

srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。
相关推荐
  • html教程
  • 微信小程序反编译教程
    微信小程序反编译教程

    今天看到一个有趣的教程,说的是一位大佬为了得到别人写的小程序源码,通过各种手段进行了反编译,最终成功得到了小程序源码。看了之后作为不学无术的我肯定得试验一番啊,不过看到有网友说成功了,还是先...

    经验分享 101 9个月前
  • HTML5视频自动循环播放方法

    如果需要在网页中添加视频,可以参考下面的代码,支持MP4视频自动循环播放。纯HTML5视频自动循环播放<!DOCTYPE HTML><html><body><video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;"><source s...

    经验分享 403 8个月前
  • html入门教程之a标签的使用方法

    一:什么是a标签?a标签的作用:就是页面之间的跳转路由,通网问路的通道。a标签的格式:<a href="链接">展示内容</a><a href="http://www.11px.cn/">精准像素</a>二:a标签的属性a标签中有一个target属性,这个属性的作用就是专门用于控制如何跳转的_blank于在新...

    经验分享 40 7个月前