<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>video demo</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
} .videobox {
width: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
} video{
width: 100%;
height: 100%;
}
#open{
width: 50px;
height: 50px;
background-color: #f91;
z-index: 99;
font-size: 17px;
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-50%)
}
#close{
position: absolute;
width: 50px;
height: 50px;
background-color: #f91;
z-index: 99;
font-size: 17px;
}
</style>
</head>
<body>
<div class="videobox">
<video id="mainvideo" webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" loop="true" poster='' controls="true"></video>
</div>
<div class="videobox" style="margin-top: 300px;">
<video id="bbb" webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" poster=''></video>
</div>
<div id="open">开始1</div>
<div id="close">开始2</div>
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script>
var op = document.getElementById('open')
var cl = document.getElementById('close')
var v = document.getElementById('mainvideo')
var v1 = document.getElementById('bbb') op.onclick = function(){
v.play() }
cl.onclick = function(){
v1.play()
}
// 不要设置自动播放
v1.ontimeupdate =function(){
if(v1.duration-v1.currentTime<= 0){
console.log(11111111111111111)
// v1.pause()
}
} // 页面只有一个视频可以播放
var videos = document.getElementsByTagName('video');
for (var i = videos.length - 1; i >= 0; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j = videos.length - 1; j >= 0; j--) {
if (j!=index) videos[j].pause();
} } </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>videodemo</title>
<style type="text/css">
html,body {
padding: ;
margin: ;
width: 100%;
height: 100%;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
.videobox {
width: 100%;
position: absolute;
left: ;
top: ;
overflow: hidden;
}
video{
width: 100%;
height: 100%;
}
#open{
width: 50px;
height: 50px;
background-color: #f91;
z-index: ;
font-size: 17px;
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-50%)
}
#close{
position: absolute;
width: 50px;
height: 50px;
background-color: #f91;
z-index: ;
font-size: 17px;
}
</style>
</head>
<body>
<div class="videobox">
<video id="mainvideo" webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" loop="true" poster='' controls="true"></video>
</div>
<div class="videobox" style="margin-top: 300px;">
<video id="bbb" webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" poster=''></video>
</div>
<div id="open">开始</div>
<div id="close">暂停</div>
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script>
var op = document.getElementById('open')
var cl = document.getElementById('close')
var v = document.getElementById('mainvideo')
var v1 = document.getElementById('bbb')
op.onclick = function(){
v.play()
}
cl.onclick = function(){
v1.play()
}
// 不要设置自动播放
v1.ontimeupdate =function(){
if(v1.duration-v1.currentTime<= ){
console.log()
// v1.pause()
}
}
// 页面只有一个视频可以播放
var videos = document.getElementsByTagName('video');
for (var i = videos.length - ; i >= ; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j = videos.length - ; j >= ; j--) {
if (j!=index) videos[j].pause();
}
}
</script>
</body>
</html>