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

时间:2022-09-26 09:21:49
各位大虾们,请不吝赐教!
页面中有2个普通按钮a,b。还有一个video标签,能成功播放出视频。。
我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!

6 个解决方案

#1


参见
<!DOCTYPE html>

<html>

  <head>

    <title>Simple JavaScript Controller</title>

    <script type="text/javascript">

 

       function playPause() {

       var myVideo = document.getElementsByTagName('video')[0];

       if (myVideo.paused)

           myVideo.play();

       else

           myVideo.pause();

       }

 

       function makeBig() {

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

      <a href="javascript:makeNormal();">1x Size</a> <br>

     </div>

  </body>

</html>

#2


var myVideo = document.getElementsByTagName('video')[0];
可以换成
document.getElementById('videoId');

<video src="myMovie.m4v" poster="poster.jpg" id="videoId"></video>

#3


额。来晚了。。。
停止的话...

myVideo.currentTime = 0;
myVideo.pause();

#4


mark

#5


谢谢各位!!问题解决了 来的晚了,忘大家见谅 结贴给分喽,平均分

#6


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

#1


参见
<!DOCTYPE html>

<html>

  <head>

    <title>Simple JavaScript Controller</title>

    <script type="text/javascript">

 

       function playPause() {

       var myVideo = document.getElementsByTagName('video')[0];

       if (myVideo.paused)

           myVideo.play();

       else

           myVideo.pause();

       }

 

       function makeBig() {

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

      <a href="javascript:makeNormal();">1x Size</a> <br>

     </div>

  </body>

</html>

#2


var myVideo = document.getElementsByTagName('video')[0];
可以换成
document.getElementById('videoId');

<video src="myMovie.m4v" poster="poster.jpg" id="videoId"></video>

#3


额。来晚了。。。
停止的话...

myVideo.currentTime = 0;
myVideo.pause();

#4


mark

#5


谢谢各位!!问题解决了 来的晚了,忘大家见谅 结贴给分喽,平均分

#6


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