Html5新增标签video视频，实现音视频的播放、暂停、快进、慢进、倍速等操作

The..Fuir

已于 2022-04-25 20:56:08 修改

阅读量1.9w

点赞数 18

分类专栏： html javascript 文章标签： html Js

于 2022-04-25 20:54:08 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124413984

版权

javascript 同时被 2 个专栏收录

122 篇文章

订阅专栏

html

50 篇文章

订阅专栏

新增标签 *

Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义的元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。

article, section,aside,header,nav,footer,address......

此外，Html5还新增了一些功能性标签，但是由于其在各个浏览器中的表现形式不一致，我们很少使用这些元素，取而代之的是组件。这里不多做讨论。

progress 表示运行中的进度等
<progress value="50" max='100'></progress>
input输入框

1.placeholder 用来描述输入字段预期值的提示信息。输入字段为空时显示

2.type的类型

可以设置为number，date等。type='number' 设置只能输入数字类型，火狐没效果，谷歌可以，兼容性差不建议使用

音视频

video视频

在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中video标签可以向使用img显示图片一样简单去播放视频。

属性：

src 需要引入的视频资源地址

controls 是否显示视频的控件，比如播放暂停进度条音量全屏等。

autoplay 在视频就绪后马上播放。跟muted搭配使用，否则可能不能自动播放。

muted 视频的音频为静音。

loop 当视频完成播放后再次开始播放

volume 视频的音量 0～1

duration 视频的总时长

currentTime 当前播放的进度

paused 当前视频的状态是否暂停暂停true

width 设置宽度

height 设置高度

方法：

play() 播放

pause() 暂停方法：

load() 重新加载当前视频
//controls 设置显示视频的控件 显示暂停播放进度条
<video src="./1.mp4" controls></video>
实现效果：当然，你自己放你的音频上去

代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <progress value="50" max="100"></progress>
    <input type="number">
    <video src="./videos.mp4" controls></video>
    <div class="btns">
        <button>播放</button>
        <button>暂停</button>
        <button>快进</button>
        <button>快退</button>
        <button>快倍速</button>
        <button>慢倍速</button>
    </div>
    <div class="play">
        <button id="play">播放</button>
        <button id="progress">获得播放百分比</button>
    </div>
    <div class="showprogress"></div>
    <script>
        //1.获取视频
        var video=document.getElementsByTagName('video')[0];
        //2.获取音频
        var btns=document.getElementsByClassName('btns')[0];
        console.log(btns);
        //3.判断按钮的文本内容、绑定事件
        btns.onclick=function(){
            //4.获取按钮内的事件 因为这里产生了点击 所以有点击事件
            var text=event.target.innerText;
            if(text == '播放'){
                // console.log(video.volume);   // 视频的音量
                // console.log(video.duration);   //视频的总长度                
              	// console.log(video.cuttertTime);   //视频当前播放的时长              	
              	// console.log(video.paused);   //视频当前播放状态   true为暂停
                video.play()
            }
            if(text == '暂停'){
                video.pause()
            }
            if(text == '快进'){
                video.currentTime +=10
                video.play()
            }
            if(text == '快退'){
                video.currentTime -=10
                video.play()
            }
            if(text == '快倍速'){
                console.log(video.playbackRate);
                video.playbackRate *= 1.8
                video.play()
            }
            if(text == '慢倍速'){
                video.playbackRate *= 0.5
                video.play()
            }
        }

         //需求：2. 同一个按钮实现暂停播放
         var play_btn = document.getElementById('play')
        play_btn.onclick = function(){
            if(video.paused){			//判断视频播放状态  true为暂停
                video.play()
                play_btn.innerText = '暂停'
            }else{
                video.pause()
                play_btn.innerText = '播放'
            }
        }

         // 需求：3.获得播放的百分比
         var progress = document.getElementById('progress')
        progress.onclick= function(){
            var total = video.duration
            var current = video.currentTime
            var res = (current/total*100).toFixed(2) +'%'
            console.log(res);
						//将百分比存入div
            var showprogress = document.getElementsByClassName('showprogress')[0]
            showprogress.innerText = res
        }

    </script>
</body>
</html>
audio音频

audio元素和video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致