首页 > 代码库 > js控制html5 【video】标签中视频的播放和停止

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

2024-09-21 05:41:46   217人阅读

需求：页面中有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="http://www.mamicode.com/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="http://www.mamicode.com/myMovie.m4v" poster="poster.jpg" id="videoId"></video>
[解决办法]
额。来晚了。。。
停止的话...
 
myVideo.currentTime = 0;    //属性设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
myVideo.pause();
------解决方案--------------------
 
 
mark

　　

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


联系
我们