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

Posted The..Fuir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html5新增标签video视频，实现音视频的播放暂停快进慢进倍速等操作相关的知识，希望对你有一定的参考价值。

新增标签 *

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元素一致

video标签播放视频只有声音没有画面&在iOS9中video标签播放无效

video标签定义视频，比如电影片段或者其他视频流。目前video标签只支持MP4，WebMail，Ogg格式的视频。

兼容性：IE8以及更早的版本不支持video标签。其他现代浏览器均支持。

各浏览器对于各个视频格式的支持如下：

  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

标签的属性和各个值代表的意思

<video id="my-video" class="movie-video" width="320" height="240" controls preload="auto" poster="img/adpic/video.png(设计所说的视频封面)">

　　<source src="movie.mp4" type="video/mp4">

　　<source src="movie.ogg" type="video/ogg">

　　您的浏览器不支持 video 标签。

</video>

$(document).on(\'tap\',\'.movie-video\',vidplay);

function vidplay() {
　　var video = document.getElementById("my-video");
　　if (video.paused) {
　　　　video.play();
　　} else {
　　　　video.pause();
　　　　$(\'.movie-video\').attr("contols","controls");
　　}
　　}

##在这次做需求的时候遇见了视频播放只有声音没有画面的情况。最后定位到是视频格式的问题，没有把导出的时候没有把编码选为h264。

**视频文件一般较大。而网络的带宽有限，所以需要视频文件不影响画质的情况下尽可能的小。有一个小窍门，能够不影响画质的情况下把视频文件变小。我是先把源文件转为avi， 这样大小会自动压缩，也就是从800m到了200m接着再转回mp4在这个时候选编码为h264    最后出来就只有100多M。这样就得到了想要的格式的小的视频啦~

##做的页面在h5的浏览器中运行的好好的。唯独在ios9中播放异常。原来是iOS9对于网络协议http要求较为严格。之前的iOS8和之后的iOS10 都对这一要求放开了。所以，只需要更改网络协议为https。在iOS9上播放页页正常了。

以上是关于Html5新增标签video视频，实现音视频的播放暂停快进慢进倍速等操作的主要内容，如果未能解决你的问题，请参考以下文章

uni app video视频播放开发

如何实现html5 video标签 手机浏览器播放视频事件判定播放中的视频超出电手机的浏览范围后视频暂停播放

前端小功能：video视频播放

Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放

html5的video标签播放视频的时候如何设置停止播放

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