h5页面 video暂停播放 视频控件 以及当前页面只有一个可以播放效果
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 >
更多精彩
