<!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>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>videodemo</title>
<style type="text/css">
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 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<= ){
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暂停播放 视频控件 以及当前页面只有一个可以播放效果的更多相关文章

  1. js页面(页面上无服务端控件，且页面不刷新)实现请求一般处理程序下载文件方法

    对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根 ...

  2. h5 的video视频控件

    h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...

  3. H5 video自定义视频控件

    1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. 可以创建专业的客户端/服务器视频会议应用程序的音频和视频控件LEADTOOLS Video Conferencing SDK

    LEADTOOLS Video Streaming Module控件为您创建一个自定义的视频会议应用程序和工具提供所有需要的功能.软件开发人员可以使用Video Streaming Module SD ...

  5. cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

    目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...

  6. UWP 播放媒体控件

    最近我的uwp需要有一个有声朗读的功能,like this 点击声音按钮就可以有声朗读了.这里主要是用了媒体播放的控件. 一般我们把需求分为两种: 一种是不需要呈现播放器的样子,只需要用户点击一下别的 ...

  7. 使用VideoView自定义一个播放器控件

    介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...

  8. android--------自定义视频控件（视频全屏竖屏自动切换）

    android播放视频也是常用的技术,今天分享一个自定义视频控件,支持自定义控制 UI,全屏播放, 可以实现自动横竖屏切换的控件,跟随手机的位置而,重力感应自动切换横竖屏. 效果图:   代码下载Gi ...

  9. Windows Phone 如果你把Pivot控件当成主页面，那么这篇文章你值得看。

    原文:Windows Phone 如果你把Pivot控件当成主页面,那么这篇文章你值得看. 现在很多App都用到了Pivot视图 来当作 整个App主页面.如果你的Pivot视图主页面承载了大量数据的 ...

随机推荐

  1. 【转】mip-semi-fixed 走走又停停

    写在前面 MIP 中悬浮元素的特殊情况 其实组件上线已经有一段时间了,最开始看到这个需求是站长提交了一个这中功能的组件过来,不过看过代码立刻就想到了 MIP 页面的特殊性:从结果页打开的 MIP 页面 ...

  2. 死磕 java集合之ConcurrentLinkedQueue源码分析

    问题 (1)ConcurrentLinkedQueue是阻塞队列吗? (2)ConcurrentLinkedQueue如何保证并发安全? (3)ConcurrentLinkedQueue能用于线程池吗 ...

  3. go语言调度器源代码情景分析之一：开篇语

    专题简介 本专题以精心设计的情景为线索,结合go语言最新1.12版源代码深入细致的分析了goroutine调度器实现原理. 适宜读者 go语言开发人员 对线程调度器工作原理感兴趣的工程师 对计算机底层 ...

  4. Python：游戏：五子棋之人机对战

    本文代码基于 python3.6 和 pygame1.9.4. 五子棋比起我之前写的几款游戏来说,难度提高了不少.如果是人与人对战,那么,电脑只需要判断是否赢了就可以.如果是人机对战,那你还得让电脑知 ...

  5. android事件分发源码分析—笔记

    昨天晚上从源码角度复习了一下android的事件分发机制,今天将笔记整理下放在网上.其实说复习,也是按着<android开发艺术探索>这本书作者的思路做的笔记. 目录 事件是如何从Acti ...

  6. jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...

  7. 产品经理之UML表达业务逻辑

    文章大纲 一. 什么是UML二. UML基础介绍三.UML实例介绍四.参考文档   一. 什么是UML   UML(Unified Modeling Language,统一建模语言) 是一种在软件设计 ...

  8. 云计算CRM软件厂商，你青睐哪家？

    2018年CRM系统软件市场风起云涌,国内外厂商群雄逐鹿.2019年,新一轮的角逐已然展开.据Gartner报告称,CRM客户关系管理系统在2017年全球的销售额首次超越数据库管理系统((Databa ...

  9. 关于IT公司技术委员会职责

    技术委员会的核心职责 组织人才相关 • 制定职级标准 - 能力框架:知识,技能,通用素质 - 职级标准:T2T3T4-P7P8P9- • 职级评审,对齐标准 • 高端招聘,对齐标准 • 校园招聘,对齐 ...

  10. 2018-2019-2 20164312 Exp1 PC平台逆向破解

    1.逆向及Bof基础实践说明 1.1 实践目标 实验对象:一个名为pwn1的linux可执行文件. 实验流程:main调用foo函数,foo函数会简单回显任何用户输入的字符串.该程序同时包含另一个代码 ...