视频暂停或结束结束 音乐开始播放;视频播放,音乐暂停;音乐播放(循环播放),视频暂停

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
                    <video id="videoPlay1" src="video.mp4" controls="controls " autoplay="true" >
                        您的浏览器暂不支持播放该视频,请升级至最新版浏览器。
                    </video>
                       <video id="videoPlay2"  src="music.mp3" loop="true" controls="controls " >
                        您的浏览器暂不支持播放该视频,请升级至最新版浏览器。
                    </video>
<script type="text/javascript">
           var video1=document.getElementById("videoPlay1");
           var video2=document.getElementById("videoPlay2");
          video1.addEventListener('play',function(){
               video2.pause();           
          });  
         video1.addEventListener('ended',function(){
               video2.play();           
          });
		video1.addEventListener('pause',function(){
               video2.play();           
          });
         video2.addEventListener('play',function(){
               video1.pause();      
          });  
		video2.addEventListener('pause',function(){
		               video1.play();           
		          });
         
</script>
</body>
</html>

发布了14 篇原创文章 · 获赞 0 · 访问量 1336
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览