android上可以实现在ios上一样，一个页面多个video时，播放其中一个，暂停其他视频吗？

Question

在一个页面上，插入多个video展示视频，在ios上，一个视频播放，其他视频自动会暂停，但是在android上，所有视频互相不干扰，可以同时播放，声音很混乱，想请教一下，是否可以让android上也可以像ios一样，一个播放其他暂停。

    (function() {
        var progressFlag;
        function createVideoControls() {
            var vids = document.getElementsByTagName('video');
            var progressWrap = $('.progressWrap');
            var playProgress = $('.playProgress');
            var showProgress = $('.showProgress');
            var video_container = $('.video-container');
            var show = $('.show');

            
            for (var i = 0; i < vids.length; i++) {
                addControls(vids[i], progressWrap[i], playProgress[i], showProgress[i], video_container[i], show[i]);
            }
        }

        function addControls(vid, progressWrap, playProgress, showProgress, video_container, show, full,full2) {
            
        
            
            vid.removeAttribute('controls');
            var controls = document.createElement('div');
            controls.setAttribute('class', 'controls');
            var play = document.createElement('button');
            play.setAttribute('title', 'Play');
            play.innerHTML = '&#x25BA;';
            controls.appendChild(play);
            vid.parentNode.insertBefore(controls, vid);
            /*遮罩层取消冒泡*/
            /*var video_container = document.getElementById('video-container');*/
            video_container.onclick = function(e) {
                if (controls.style.display == 'block') {
                    controls.style.display = 'none';
                } else {
                    controls.style.display = 'block';
                };
                e.stopPropagation();
            }
            play.onclick = function(e) {
                
                    if (vid.ended) {
                        vid.currentTime = 0;
                    }
                    if (vid.paused) {
                        vid.play();
                        
                        progressFlag = setInterval(getProgress, 60);
                    
                    } else {
                        vid.pause();
                        
                        clearInterval(progressFlag);
                    }
                    e.stopPropagation();
                
            }
            progressWrap.onclick = function(e) {
                e.stopPropagation();
            }
            function getProgress() {
                var percent = vid.currentTime / vid.duration;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                var s_second = vid.currentTime;
                var s_time = s_second;
                var s_time1;
                var s_time2;
                if (s_time > 60) {
                    s_time1 = parseInt(s_time / 60);
                    s_time = parseInt(s_time % 60);
                }
                var start_time = "" + parseInt(s_time) + "";
                if (s_time < 10) {
                    start_time = '0' + parseInt(s_time) + "";
                }
                if (s_time1 > 0) {
                    if (s_time1 < 10) {
                        start_time = '0' + parseInt(s_time1) + " : " + start_time;
                    } else {
                        start_time = "" + parseInt(s_time1) + " : " + start_time;
                    }
                } else {
                    start_time = '00' + " : " + start_time;
                }
                showProgress.innerHTML = start_time;
                var seconds = vid.duration;
                var theTime = seconds;
                // 秒
                var theTime1 = 0;
                // 分
                var theTime2 = 0;
                // 小时
                // alert(theTime);
                if (theTime > 60) {
                    theTime1 = parseInt(theTime / 60);
                    theTime = parseInt(theTime % 60);
                    // alert(theTime1+"-"+theTime);
                    if (theTime1 > 60) {
                        theTime2 = parseInt(theTime1 / 60);
                        theTime1 = parseInt(theTime1 % 60);
                    }
                }
                /*展示总时间*/
                var result = "" + parseInt(theTime) + "";
                if (theTime < 10) {
                    result = '0' + parseInt(theTime) + "";
                }
                if (theTime1 > 0) {
                    result = "" + parseInt(theTime1) + " : " + result;
                    if (theTime1 < 10) {
                        result = '0' + parseInt(theTime1) + " : " + result;
                    }
                } else {
                    result = '00' + " : " + result;
                }
                if (theTime2 > 0) {
                    result = "" + parseInt(theTime2) + " : " + result;
                    if (theTime2 < 10) {
                        result = '0' + parseInt(theTime2) + " : " + result;
                    }
                }
                show.innerHTML = result;
            }
            progressWrap.addEventListener('mousedown', function(e) {
                if (vid.paused || vid.ended) {
                    if (vid.ended) {
                        vid.currentTime = 0;
                    }
                    if (vid.paused) {
                        vid.play();
                        progressFlag = setInterval(getProgress, 60);
                    } else {
                        vid.pause();
                        clearInterval(progressFlag);
                    }
                    e.stopPropagation();
                    enhanceVideoSeek(e);
                } else {
                    enhanceVideoSeek(e);
                }
            }, false);
            function enhanceVideoSeek(e) {
                clearInterval(progressFlag);
                var length = e.pageX - progressWrap.offsetLeft;
                var percent = length / progressWrap.offsetWidth;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                vid.currentTime = percent * vid.duration;
                progressFlag = setInterval(getProgress, 60);
            }

            vid.addEventListener('play', function() {
                play.innerHTML = '▐▐';
                play.setAttribute('paused', true);
            }, false);
            vid.addEventListener('pause', function() {
                play.removeAttribute('paused');
                play.innerHTML = '►';
            }, false);
            vid.addEventListener('ended', function() {
                vid.pause();
            }, false);
        }

        window.onload = function() {
            createVideoControls();
        }
    })()

Answer 1

你的问题解决了吗？我也遇到了相同的问题