video.js事件监听 实现视频过大时自动播放

617 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Titan M1-Pro</title>
    <link rel="stylesheet" href="css/video-js.css">
</head>
<body>
<video
        id="my-video"
        class="video-js vjs-default-skin vjs-big-play-centered"
        style="object-fit: cover"
        preload="auto"
        data-setup="{}"
>
    <source src="./images/column/Titan%20M1-Pro.mp4" type="video/mp4" />
</video>
</body>
<script src="js/video.min.js"></script>
<script>
    player = videojs("my-video", {
        controls: true, //是否显示控制条
        poster: 'xxx', // 视频封面图地址
        muted: true, // 是否静音
        preload: 'auto', //预加载
        autoplay: true, //是否自动播放
        fluid: true, // 自适应宽高
        loop: true, //是否循环播放
        width: innerWidth,
        height: innerHeight,
    });
    window.onresize = function () {
        $("#my-video").width(innerWidth)
        $("#my-video").height(innerHeight)
    }
    // 监听并添加class实现自动播放
    player.on('timeupdate', function (event) {
        var currentTime = parseInt(this.currentTime()); //当前时间
        var video = document.getElementById('my-video')
        if (currentTime >= 0) {
            video.classList.add("vjs-has-started")
        }
    })
</script>
</html>