在一个页面上,插入多个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 = '►';
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();
}
})()