html5视频标签video视频倍速播放的实现

最新推荐文章于 2024-07-31 09:18:16 发布

梅坞茶坊

最新推荐文章于 2024-07-31 09:18:16 发布

阅读量4.9k

点赞数 3

文章标签： html5 音视频 html

本文链接：https://blog.csdn.net/qq_32421489/article/details/122409970

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
   <style>
       .video-div{
           width:500px;
           height:600px;
           margin:0 auto;
       }
       #video{
           width:500px;
           height:600px;
       }
       #video_val{
           width:500px;
       }
       #video-btn{
           margin-top:10px;
           margin-right:10px;
       }
       .video-div button{
           cursor:pointer;
       }
   </style>
</head>
<body>
   <div class="video-div">
       <video id="video" controls src="" type="video/mp4"></video>

       <p>选择播放速率：
           <select id="selRate">
           <option value="0.5">0.5</option>
           <option value="1" selected>1.0</option>
           <option value="1.25">1.25</option>
           <option value="1.5">1.5</option>
           <option value="2">2.0</option>
           </select>
       </p>
       <span>输入视频链接：</span>
       <input type="text" name="" value="" id="video_val" />
       <br />
       <button οnclick="videoBtn()" id="video-btn">点击播放</button>
       <button οnclick="videoClear()">清空链接</button>
   </div>

   <script type="text/javascript">
       var eleSelect = document.getElementById('selRate');
       // 酷播提示：视频元素
       var video = document.getElementById('video');
       // 改变播放速率
       eleSelect.addEventListener('change', function () {
       video.playbackRate = this.value;
       });

       function videoBtn(){
           var video_val = $('#video_val').val();
           if(video_val){
               $('#video').attr('src',video_val);
               eleSelect.value = '1'
               video.playbackRate = '1';
               video.play();
           }
       }
       function videoClear(){
           $('#video_val').val('');
       }
   </script>
</body>
</html>