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              100%;
 11             height: 100%;
 12             -webkit-user-select: none; 
 13             user-select: none;
 14             overflow: hidden;
 15             }
 16 
 17             .videobox {
 18                  100%;
 19                 position: absolute;
 20                 left: 0;
 21                 top: 0;
 22                 overflow: hidden;
 23             }
 24 
 25             video{
 26                  100%;
 27                 height: 100%;
 28             }
 29             #open{
 30                  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                  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>

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

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