h5页面 video暂停播放 视频控件 以及当前页面只有一个可以播放效果

时间:2024-02-17 22:39:32
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta name="viewport" content="width=device-width,initial-scale=1">
  5     <title>video demo</title>
  6     <style type="text/css">
  7         html,body {
  8             padding: 0;
  9             margin: 0;
 10             width: 100%;
 11             height: 100%;
 12             -webkit-user-select: none; 
 13             user-select: none;
 14             overflow: hidden;
 15             }
 16 
 17             .videobox {
 18                 width: 100%;
 19                 position: absolute;
 20                 left: 0;
 21                 top: 0;
 22                 overflow: hidden;
 23             }
 24 
 25             video{
 26                 width: 100%;
 27                 height: 100%;
 28             }
 29             #open{
 30                 width: 50px;
 31                 height: 50px;
 32                 background-color: #f91;
 33                 z-index: 99;
 34                 font-size: 17px;
 35                 position: absolute;
 36                 top: 12%;
 37                 left: 50%;
 38                 transform: translateX(-50%)
 39             }
 40             #close{
 41                 position: absolute;
 42                 width: 50px;
 43                 height: 50px;
 44                 background-color: #f91;
 45                 z-index: 99;
 46                 font-size: 17px;
 47             }
 48     </style>
 49 </head>
 50 <body>
 51     <div class="videobox">
 52         <video id="mainvideo" webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4" loop="true" poster=\'\'    controls="true"></video>
 53     </div>
 54     <div class="videobox" style="margin-top: 300px;">
 55         <video id="bbb" webkit-playsinline="true" src="http://upyun.xuanheyinhua.com/李娜/李娜老师快剪.mp4"  poster=\'\'></video>
 56     </div>
 57     <div id="open">开始1</div>
 58     <div id="close">开始2</div>
59 60 <script 61 src="https://code.jquery.com/jquery-3.4.0.min.js" 62 integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" 63 crossorigin="anonymous"></script> 64 <script> 65 var op = document.getElementById(\'open\') 66 var cl = document.getElementById(\'close\') 67 var v = document.getElementById(\'mainvideo\') 68 var v1 = document.getElementById(\'bbb\') 69 70 op.onclick = function(){ 71 v.play() 72 73 } 74 cl.onclick = function(){ 75 v1.play() 76 } 77 // 不要设置自动播放 78 v1.ontimeupdate =function(){ 79 if(v1.duration-v1.currentTime<= 0){ 80 console.log(11111111111111111) 81 // v1.pause() 82 } 83 } 84 85 // 页面只有一个视频可以播放 86 var videos = document.getElementsByTagName(\'video\'); 87 for (var i = videos.length - 1; i >= 0; i--) { 88 (function(){ 89 var p = i; 90 videos[p].addEventListener(\'play\',function(){ 91 pauseAll(p); 92 }) 93 })() 94 } 95 function pauseAll(index){ 96 for (var j = videos.length - 1; j >= 0; j--) { 97 if (j!=index) videos[j].pause(); 98 } 99 100 } 101 102 </script> 103 </body> 104 </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: 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">开始</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<= 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>