zoukankan      html  css  js  c++  java
  • 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
    

      

  • 相关阅读:
    (005)Linux 复制命令cp总提示是否覆盖的解决方法,在cp前加
    (030)Spring Boot之RestTemplate访问web服务案例
    Gym
    Gym
    Gym.102006:Syrian Collegiate Programming Contest(寒假自训第11场)
    BZOJ-5244 最大真因数(min25筛)
    HDU
    HDU 1272 小希的迷宫(并查集)
    HDU 3038 How Many Answers Are Wrong(带权并查集)
    POJ 1182 食物链(带权并查集)
  • 原文地址:https://www.cnblogs.com/hyh123/p/6841430.html
Copyright © 2011-2022 走看看