video.js 获取多个 video 和多个 audio 的长度以及播放时长

video.js 获取多个 video 和多个 audio 的长度以及播放时长

• 话不多说，线上我的客户的需求：
• 客户：‘我们现有的视频播放有个逻辑在里面：如果没选课，可以随意拖拽，不记进度；如果选了课程，则进度不可拖拽，此时按照播放进度记录时长’
• 播放过程每15秒抛一次，然后每个视频或音频播放完抛一次；
• 每个音频或视频的进度，对我们来说不重要，我们只要总进度就好了，每个的进度主要是要再抛还给你们的；
  *-----------------------------------------------------------------------------------------------
  以上就是客户的需求！
  接下来就是代码：【这里算的上是没有后台的】
  main 页面通过 iframe 调用 index页面；

这是main.html

//父级监听
        window.addEventListener('message', function(e) {
            //从子页面传递的值,会保存到服务器
            console.log(e.data);
            result = JSON.stringify(e.data);
            // console.log(result)
        });
        window.onload = function() {
            // if (result)
            // 	console.log(JSON.parse(result));
            // console.log("*********")
            var myframe = document.getElementById('myframe');
            //服务器获取的值传递到子页面
            myframe.contentWindow.postMessage({
                canDrag: 0, //0禁止拖动, 1可以拖动
                dataVideo: [{
                        name: "my_video_1_html5_api",
                        bfb: 90
                    },
                    {
                        name: "my_video_2_html5_api",
                        bfb: 30
                    },
                ],

                dataAudio: [{
                        name: "audio1",
                        bfb: 90
                    },
                    {
                        name: "audio2",
                        bfb: 30
                    },
                ]
            }, 'http://127.0.0.1:8848')
        }

index.html

var dataVideo = [];
        var dataAudio = [];

        function onloand() {
            //定时传递数据到main.html
            setInterval(function() {
                dataVideo = [];
                $("video").each(function() {
                    var id = this.id;
                    var myPlay = videojs(id);
                    var bfb = parseInt(myPlay.currentTime() / myPlay.duration() * 100);
                    var temp = {};
                    temp.name = id;
                    temp.bfb = bfb
                    dataVideo.push(temp);
                })

                // 音频
                dataAudio = [];
                $("audio").each(function() {
                    // console.log(this.id)
                    var id = this.id;
                    // var myPlay = videojs(this.id);
                    var bfb = parseInt(this.currentTime / this.duration * 100);
                    var temp = {};
                    temp.name = id;
                    temp.bfb = bfb
                    dataAudio.push(temp);
                })
                // console.log(data);
                window.parent.postMessage({
                    dataVideo: dataVideo,
                    dataAudio: dataAudio
                }, '*');
            }, 1500)
        }

        window.onload = function() {
            //服务器传送过来的值,初始化音视频播放位置
            var reactiveFlag = false
            window.addEventListener('message', function(e) {
                var canDrag = e.data.canDrag;
                if (!reactiveFlag) {
                    // 视频
                    var data = e.data.dataVideo;
                    for (var i = 0; i < data.length; i++) {
                        // console.log(data[i])
                        var myPlay = videojs(data[i].name)
                        myPlay.currentTime(myPlay.duration() * (data[i].bfb / 100));
                    }

                    // 音频
                    var dataAudio = e.data.dataAudio;
                    console.log(dataAudio);
                    for (var i = 0; i < dataAudio.length; i++) {
                        var temp = dataAudio[i];
                        var audioPlay = document.getElementById(dataAudio[i].name);
                        audioPlay.load();
                        audioPlay.onloadeddata = function() {
                            console.log(temp.bfb+"-===="+this.duration);
                            console.log(this)
                            this.currentTime = this.duration * (temp.bfb / 100);
                        }
                    }

                    // 判断
                    if (canDrag == 0) {
                        onloand()
                        $("video").each(function() {
                            var id = this.id;
                            var Play = videojs(id)
                            Play.disableProgress({
                                autoDisable: true
                            });
                        })
                    }
                }
                return reactiveFlag = true
            });
        }

注意：着这个过程中，我用了一个禁用拖动 video 进度条的方法，超级好使，有需要的小伙伴，直接点解开链接点击查看。