H5 video控件视频加载控制类

最新推荐文章于 2025-03-18 13:29:03 发布

QQ282881515

最新推荐文章于 2025-03-18 13:29:03 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/QQ282881515/article/details/74551845

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的双视频同步播放控制器。该控制器能够同时管理两个视频元素的播放、暂停及加载新源等功能，并在初始化时为每个视频元素绑定元数据加载完成事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var BusVideoInfo = function () {
    var obj = {
        e_1: document.getElementById('id_1'), //前方
        e_2: document.getElementById('id_2'), //后方


        init: function () {
            obj.e_1.onloadedmetadata = function () {
                console.log('loaded 1')
               // obj.e_1.play()
            }
            obj.e_2.onloadedmetadata = function () {
                console.log('loaded 2')
                //obj.e_2.play()
            }
        },
        
        //播放
        play: function () {
            obj.e_1.play();
            obj.e_2.play();
        },

        //暂停
        pause: function () {
            obj.e_1.pause();
            obj.e_2.pause();
        },

        //加载新的播放地址
        load: function (url1, url2) {//url1=车前 url2=车内
            obj.e_1.src = url1
            obj.e_2.src = url2
            obj.e_1.load()
            obj.e_2.load()
        }
    }
    return obj;
}