js控制html5 video标签中视频的播放和停止

Posted 2020-09-17 hyh123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js控制html5 video标签中视频的播放和停止相关的知识，希望对你有一定的参考价值。

需求：页面中有2个普通按钮a，b。还有一个video标签，能成功播放出视频。。我想要的效果是，点击a按钮，视频开始播放，点击b按钮，视频播放停止！！！<br><br>----------------------------------------------------code---------------------------------------------------------------------------<br><br><!DOCTYPE html>
 
<html>
 
  <head>
 
    <title>Simple javascript Controller</title>
 
    <script type="text/javascript">
 
       function playPause() {
 
       var myVideo = document.getElementsByTagName(‘video‘)[0];   //获取视频video
 
       if (myVideo.paused){
 
           myVideo.play();
 
       }else{
 
           myVideo.pause();
 
       }
 
       function makeBig() {     //全屏  高度2倍
 
       var myVideo = document.getElementsByTagName(‘video‘)[0];
 
       myVideo.height = (myVideo.videoHeight * 2 ) ;
 
       }
 
 
       function makeNormal() {   //取消全屏
 
       var myVideo = document.getElementsByTagName(‘video‘)[0];
 
       myVideo.height = (myVideo.videoHeight) ;
 
       }
 
    </script>
 
  </head>
 
  
  <body>
 
     <div class="video-player" align="center">
 
     　　 <video src="myMovie.m4v" poster="poster.jpg" ></video>     <!--视频 -->
 
      <br>
 
      <a href="javascript:playPause();">Play/Pause</a> <br>    <!--播放  暂停-->
 
      <a href="javascript:makeBig();">2x Size</a>     <!--放大视频--><br>
[解决办法]
 
      <a href="javascript:makeNormal();">1x Size</a> <br>     <!--还原视频 -->
 
     </div>
 
  </body>
 
</html>

　　[解决办法]:

var myVideo = document.getElementsByTagName(‘video‘)[0];
可以换成
document.getElementById(‘videoId‘);
 
<video src="myMovie.m4v" poster="poster.jpg" id="videoId"></video>
[解决办法]
额。来晚了。。。
停止的话...
 
myVideo.currentTime = 0;    //属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
myVideo.pause();
------解决方案--------------------
 
 
mark

以上是关于js控制html5 video标签中视频的播放和停止的主要内容，如果未能解决你的问题，请参考以下文章

html5的video标签播放视频的时候如何设置停止播放

使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

html5视频播放器与视频js的关系

html5中视频播放问题总结

js使用video标签当切换视频时会显示上一个视频的