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

 <!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>

<title>videodemo</title>

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>

</div>

<script

src="https://code.jquery.com/jquery-3.4.0.min.js"

integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="

crossorigin="anonymous"></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>

h5页面 video暂停播放视频控件以及当前页面只有一个可以播放效果的更多相关文章

js页面(页面上无服务端控件，且页面不刷新)实现请求一般处理程序下载文件方法
对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根 ...
h5 的video视频控件
h5 的video视频控件由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...
H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK
LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...
cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)
目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...
UWP 播放媒体控件
最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...
使用VideoView自定义一个播放器控件
介绍最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
android--------自定义视频控件（视频全屏竖屏自动切换）
android播放视频也是常用的技术,今天分享一个自定义视频控件,支持自定义控制 UI,全屏播放, 可以实现自动横竖屏切换的控件,跟随手机的位置而,重力感应自动切换横竖屏. 效果图: 代码下载Gi ...
Windows Phone 如果你把Pivot控件当成主页面，那么这篇文章你值得看。
原文:Windows Phone 如果你把Pivot控件当成主页面,那么这篇文章你值得看. 现在很多App都用到了Pivot视图来当作整个App主页面.如果你的Pivot视图主页面承载了大量数据的 ...

随机推荐

漏洞经验分享丨Java审计之XXE（下）
上篇内容我们介绍了XXE的基础概念和审计函数的相关内容,今天我们将继续分享Blind XXE与OOB-XXE的知识点以及XXE防御方法,希望对大家的学习有所帮助! 上期回顾 ◀漏洞经验分享丨Java ...
flutter初体验
flutter初体验和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词 ...
Named Volume 在 MySQL 数据持久化上的基本应用
原文作者:春哥初识春哥时,春哥是美术设计大咖.后不久,创业并致力于游戏开发,已有3年.从Unity3D到IOS(Swift)开发,从前端开发到后端以及容器技术,从设计开发测试到产品经理以及CEO,已 ...
在nuget上发布自己的程序集教程
前期准备 [1]注册nuget官网账号:注册地址:https://www.nuget.org/ [2]下载Nuget.exe文件:下载地址:https://www.nuget.org/downloa ...
新手学习WEB前端流程以及学习中常见的误区
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...
看一眼就学会的 HTML 小游戏搭建！
本文作者:CODING 用户 - xfly 身边经常会有小伙伴问我有没有办法不买服务器也能上线自己的个人项目,比如不少同学都非常喜欢搭建一个属于自己的博客站点或者小游戏等. 目前相对比较简便的且不花自 ...
SAP MM 标准采购组织的分配对于寄售采购订单收货的影响
SAP MM 标准采购组织的分配对于寄售采购订单收货的影响 PO 4100004022 是一个寄售的采购订单, 采购组织是CSAS, 工厂代码SZSP.采购信息记录也是有的, MIGO试图对该采购订单 ...
需求分析&用例编写
一.需求分析? 1.什么是需求软件产品必须完成的是以及必须具备的品质. 功能性需求:产品必须完成的那些事,要求一定的功能和品质. 例子:淘宝的用户名登录. 非功能性需求:产品必须具备的属性和品质.诸 ...
Cmake 学习笔记
编写CMakeLists.txt #在当前目录新建一个build目录,然后cd build:cmake .. #这样的好处是,可以将cmake生成的内容,和源码文件分离 #设置编译结果发布路径 ...
pytest进阶之fixture
前言学pytest就不得不说fixture,fixture是pytest的精髓所在,就像unittest中的setup和teardown一样,如果不学fixture那么使用pytest和使用unit ...

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

h5页面 video暂停播放 视频控件 以及当前页面只有一个可以播放效果的更多相关文章

随机推荐

热门专题

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

h5页面 video暂停播放视频控件以及当前页面只有一个可以播放效果的更多相关文章