js统制html5 video标签中视频的播放和停止-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20551 次

js控制html5 video标签中视频的播放和停止
各位大虾们，请不吝赐教！
页面中有2个普通按钮a，b。还有一个video标签，能成功播放出视频。。
我想要的效果是，点击a按钮，视频开始播放，点击b按钮，视频播放停止！！！

------解决方案--------------------
参见

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

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

<video src="myMovie.m4v" poster="poster.jpg" id="videoId"></video>
------解决方案--------------------
额。来晚了。。。
停止的话...

myVideo.currentTime = 0;
myVideo.pause();
------解决方案--------------------

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>