android屏幕多个视频播放,android上可以实现在ios上一样,一个页面多个video时,播放其中一个,暂停其他视频吗?...

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

}

})()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native提供了一个名为`react-native-video`的第三方库,它可以在iOSAndroid平台上实现视频播放功能。 下面是在iOS平台上使用`react-native-video`库实现视频播放的基本步骤: 1. 安装`react-native-video`库 可以通过npm或yarn安装: ``` npm install react-native-video ``` 或者 ``` yarn add react-native-video ``` 2. 在Xcode中配置`react-native-video`库 打开你的React Native项目的ios文件夹,找到.xcodeproj文件并打开,在Xcode中添加`react-native-video`库。 3. 导入`react-native-video`库 在需要使用视频播放的组件中导入`react-native-video`库: ``` import Video from 'react-native-video'; ``` 4. 添加视频播放器 在需要播放视频的组件中添加`Video`组件: ``` <Video source={{ uri: "https://example.com/video.mp4" }} // 视频的URL地址 ref={(ref) => { this.player = ref }} // 视频播放器的引用 style={styles.backgroundVideo} // 视频播放器的样式 controls={true} // 是否显示播放器控制条 /> ``` 5. 控制视频播放 你可以通过控制`Video`组件的状态来控制视频播放,例如: ``` this.player.seek(0); // 将当前播放位置设置为0 this.player.pause(); // 暂停视频播放 this.player.play(); // 开始播放视频 ``` 以上是基本的视频播放功能实现,你还可以通过`react-native-video`库提供的其他API来增加更多的功能,例如: - 设置视频的缩放模式 - 实现视频的全屏播放 - 获取视频播放长和当前播放位置等 希望这些信息对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值