JavaScript多个h5播放器video，点击一个播放其他暂停

比眉伴天荒 2022-05-10 02:58 254阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多个H5播放器video 如何播放暂停</title>
    </head>
    <body>
    
        <video src="http://img.tianxiang.com/d/2018/06/5b1a45f89f96b.mp4" controls="controls"></video>
        <video src="http://vodfile12.news.cn/data/cdn_transfer/1F/FE/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4" controls="controls"></video>
    
        <script type="text/javascript">
            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>

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 video循环播放多个视频

最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频设计流程 1. 扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面...

﹏ヽ暗。殇╰゛Y/ 2024年04月18日 21:29/ 0 赞/ 94 阅读

相关 video.h5.player.js视频播放器

> video.h5.player.js（内部项目）是一款基于[flowplayer][]开发的视频播放器，播放核心采用video标签/flash控件，界面完全交由用户

悠悠/ 2024年02月19日 18:13/ 0 赞/ 64 阅读

相关 html5播放rtmp流 h5 rtmp播放器 web播放器 H5播放rtsp流

经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；除了HTTP、WebSocket类的传输

╰半橙微兮°/ 2023年10月13日 21:01/ 0 赞/ 66 阅读

相关使用H5中的video标签时，页面中间显示“暂停”图标；点击播放，图标消失；点击暂停，图标出现（play、pause、ended）

> 有时候我们在做项目的过程中会遇到这样的需求： > > 使用H5中的video标签播放一个视频，并在视频的中心位置放置一个暂停的图标，点击后视频播放，图标消失；再次点

超、凢脫俗/ 2023年01月23日 13:54/ 0 赞/ 760 阅读

相关 H5页面视频播放后video标签层级变为最高遮盖其他元素

H5页面视频播放后video标签层级变为最高遮盖其他元素 Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,H5页面播放完视频后,vid

浅浅的花香味﹌/ 2022年12月03日 01:54/ 0 赞/ 470 阅读

相关 h5-video自动播放兼容性处理

[HTML<video/>视频无法自动播放][HTML_video] 最新|解决前端微信浏览器中video标签不能自动播放视频问题最近前端有一个需求要求在网页中自动

小灰灰/ 2022年11月09日 12:40/ 0 赞/ 230 阅读

相关 videojs多个视频一起播放暂停

需求多个视频要用同一个进度条控制播放暂停 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

布满荆棘的人生/ 2022年11月03日 14:27/ 0 赞/ 429 阅读

相关 JavaScript多个h5播放器video，点击一个播放其他暂停

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年05月10日 02:58/ 0 赞/ 255 阅读

相关 H5视频，播放，暂停，重新播放

H5视频，播放，暂停，重新播放 ```<!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2022年05月08日 00:10/ 0 赞/ 427 阅读

相关 js之 H5 的 video 标签暂停播放视频

一、问题基于 video 标签播放的视频，大致功能是，点击预览按钮，弹出弹框，可以在线观看视频；如果关闭弹框，视频还是在播放。二、要求关

蔚落/ 2021年08月04日 11:07/ 0 赞/ 690 阅读