HTML基础篇-17HTML之视频播放

频是网页承载内容很重要的一个元素，也是必不可少的网页表现形式（图、文、表、视、音）之一。曾经网页要想播放视频、制作游戏，必须得用第三方插件flash。不仅编写代码要使用额外的语言，浏览器也必须得装第三方插件，非常不方便。随着html5标准逐渐普及，移动端、pc端开始抛弃flash，如今几乎所有的浏览器都使用html5来制作视频。

目标

了解Flash为何会被淘汰？
如何设置视频播放？
视频播放支持哪几种视频格式？

flash崛起--网页标准的耻辱

flash是Adobe公司其中之一的产品。它发起于W3C与WHATWG的第五代web标准之争，它捡了个大便宜，乘机定义网页媒体标准。

W3C与WHATWG的第五代web标准之争

flash填补了当时网页只有文字和图片的单调世界，将媒体（视频、音频、游戏）引入了网页，将网页带进多彩的世界。

Flash能够用仅仅十几K到几百K的体积，呈现出放大也不会失真的矢量彩色动图，甚至还能够做出足以令人沉迷一整天的Flash小游戏。

火柴人

Flash用第三方插件的身份，几乎制霸了网页媒体的标准，让W3C尴尬不已，甚至从某种程度上说，让真正的网页标准推广受阻。

flash衰败--HTML5崛起并全面普及

2010年4月，苹果CEO公开表示从此苹果所有产品不再支持flash。flash从此慢慢丧失移动端的市场和地位。

乔布斯支持html5

2012年，安卓宣布不再支持Flash，从此flash彻底失去了移动端市场和地位。

2012年html5标准确立，html5在逐渐制霸移动端的地位时，也直接冲击了flash仅剩的桌面市场，flash桌面市场的份额在逐步下降。

各大浏览器逐步默认禁用Flash，现2019年几乎都全部禁用。

默认禁用Flash

Adobe将在2020年停止开发和更新flash。

2020年停止开发和更新flash

flash兴起衰败皆因自己

Flash以第三方插件的身份，做着平台该做的事情，但没有推动行业标准统一化，反而企图私立标准。

随着功能的增多，能解码编码H.264，能进行3D渲染，能播放7.1声道环绕声等，功能集于一身变得臃肿，效率变得低下。

Flash非常不安全。Flash能够运行相当复杂的代码，这让Flash非常容易被渗透。加上Adobe在安全方面的不上心，这令Flash安全问题频发。

Flash很不稳定。作为一个插件，它自身频频崩溃也就罢了，还经常拉着浏览器乃至操作系统一起殉情。

Flash加剧了手机的耗电量。

html5媒体新标准--Video标签

作用是在 HTML 页面中嵌入视频元素。Video定义视频，比如电影片段或其他视频流。

视频播放

Video标签的属性

src 视频的播放源
controls 浏览器自带的控制条
width 视频宽度
height 视频高度
poster 视频封面
autoplay 自动播放
preload 预加载

有四个是必须的属性：src、controls、width、height属性。

视频播放代码

source标签

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

<source> 元素可以链接不同格式的视频文件。浏览器将使用第一个可识别的格式。

src 视频的播放源
Type 视频格式 MP4, WebM, 和 Ogg

支持多格式的视频

总结

video标签体系

视频采集和管理是多模态大数据应用场景必不可少的环节，在基于Vue2前端框架实现的Web界面如何进行视频的展示和播放是开发人员会遇到的一个主要技术问题。本文提供基于Vue2+video.js实现视频的预览的方案。

采集的视频数据在前端视频管理模块列表中展示，然后用弹窗查看视频详情并预览播放。最开始使用 vue-mini-player 组件，可轻松实现视频在编辑界面的弹窗中播放，但是遇到两个问题：1）弹窗中播放着视频，关闭窗口后，视频流不会停止。2）关闭窗口，重新打开新的视频编辑窗口后，依旧是继续播放之前的视频。其原因应该是关闭旧的窗口后，视频播放的控件没有销毁，导致新打开的控件其实还是旧控件的实例。查了很多关于vue-mini-player的文档和使用样例，没有找到如何销毁vue-mini-player控件。

视频列表

单条视频数据编辑界面

video.js 是一个通用的可嵌入网页的视频播放器JS库，在Vue2中引用video.js可以创建播放组件对象，关闭视频时能进行操作。基于Vue2使用video.js方法如下。

安装video.js：

npm install video.js@6.13.0

main.js注册

import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注册

vue代码文件中使用组件

创建<video>组件，可放在弹窗中任何需要的地方。重点是给出id值，设置属性时需要用到。

<template>
  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
          <source :src="playUrl" type="video/mp4">
      </video>
      ...
      <div slot="footer" class="dialog-footer">
        	<el-button type="primary" @click="submitForm">确 定</el-button>
        	<el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>

export default {
data() {
    return {
    // 使用video.js播放视频配置
    videoJsPlayer: null,
    playUrl:"", 			//视频文件链接
    videoPlayerOption: {
        controls: true, 			//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        // url: "", 							//要嵌入的视频资源url（不起作用？）
        poster: '',   					//封面
         autoplay: false, 	//自动播放属性, true/false/"muted"(静音播放)
        muted: false, 				//静音播放
        preload: 'none', 		//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        fluid: false, 					//是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
        width: "850px", 		//视频播放器的显示宽度（以像素为单位）（fluid=false时起作用）
        height: "600px", 		//视频播放器的显示高度（以像素为单位）（fluid=false时起作用）
     },
};

methods: {
   // 视频列表的“修改”按钮，点击后显示修改弹窗
   handleUpdate(row) {
        // 从后台获取视频信息
        getVedio(row.id).then(response => {
            this.form = response.data;    //修改弹窗其他字段信息赋值
            this.title = "修改视频管理";
            this.open = true;    								// 显示修改弹窗

            // video.js组件播放视频
            this.videoPlayerOption.poster = response.data.avator;
            this.playUrl = response.data.contentsOrg;
            this.showVideoWindow();   //设置视频播放控件
        });
     },
       
    //（重点是这里）
    // 使用video.js组件播放视频
     showVideoWindow(){
        // 如果视频播放控件已经存在，切换视频url，重新播放；如果控件不存在，创建
        if(this.videoJsPlayer){
            this.videoJsPlayer.src([
                 {
                    src: this.playUrl,
                    type: "video/mp4"
                 }
             ]);
            // 如何图片不为空，设置视频封面
            if(this.videoPlayerOption.poster != null && this.videoPlayerOption.poster != ""){
            		this.videoJsPlayer.poster(this.videoPlayerOption.poster);
             }
            this.videoJsPlayer.load(this.playUrl);
            // this.videoJsPlayer.play();      //自动播放（打开后，切换视频后需自动播放）
         }else{
            // 最开始创建一次视频播放组件
            this.$nextTick(() => {
                this.videoJsPlayer = this.videoJs(
                    "casvideoplayer", 				//播放器控件id
                    this.videoPlayerOption //播放器设置项（这里设置的poster属性不生效，需要在后面单独设置）
                 );
                this.videoJsPlayer.poster(this.videoPlayerOption.poster);  //貌似不生效？
             })
         }
     },
       
    // 编辑弹窗页面的“取消”按钮
    cancel() {
        // 重置视频控件数据（video.js组件）
        if(this.videoJsPlayer){
            this.videoJsPlayer.reset();
         }
					this.reset();
 		},
｝

以上代码实现了在Vue2弹窗中播放视频组件的功能，注意关闭弹窗时要使用“取消”按钮。如果通过点击弹窗右上角X关闭弹窗，视频还可以在后台继续播放，但是打开一个新的视频修改弹窗后，播放的视频会终止，并切换到新视频播放界面。即使这样，目前的功能已经不影响用户正常使用。

video.js还有一个强大功能，看到喜欢的画面点击右键可以保存视频帧，另外支持画中画、设备投放等功能。

video.js右键功能

后续优化改进工作包括：1）把video.js视频播放功能做成Vue组件，方便在不同的Vue代码文件中调用。2）捕获窗口关闭的事件（如点击X关闭，或者鼠标失焦点后关闭），关闭视频流。

video.js

Vue

【参考材料】

video.js官方网站：https://videojs.com/

其他编码材料：

https://blog.csdn.net/qq_60533482/article/details/128015308

https://blog.csdn.net/Uookic/article/details/116131535

https://www.cnblogs.com/DL-CODER/p/16833222.html

用说明：把代码中的视频路径换成与自己的相对路径或绝对路径，播放器的窗口大小，根据需要修改高和宽的参数。

1.avi格式

复制代码

代码如下:

</embed>

</object>

2.mpg格式

复制代码

代码如下:

</object>

3.rm格式

复制代码

代码如下:

4.wmv格式

复制代码

代码如下:

</object>

5:最简单的播放代码

复制代码

代码如下:

6:有图像的rm格式

复制代码

代码如下:

</OBJECT>

7:无图像的rm格式：(如相声，歌曲...)

复制代码

代码如下:

</object>

8:最简单的media格式的播放器

复制代码

代码如下:

9:有图像的media播放器，自动调用网上的插件

复制代码

代码如下:

10:无图像的media播放器

复制代码

代码如下:

</object>

11:在线播放rm格式视频代码

复制代码

代码如下:

</object><br>

</object>

媒体播放器的外观界面

在网页中，你可以通过相关属性来控制媒体播放器的哪些部分出现，哪些部分不出现。

媒体播放器包括如下元素：

VideoDisplayPanel：视频显示面板；

VideoBorder：视频边框；

ClosedCaptioningDisplayPanel；字幕显示面板；

TrackBar；搜索栏；

ControlBarwithAudioandPositionControls：带有声音和位置控制的控制栏；

GoToBar：转到栏；

DisplayPanel：显示面板；

StatusBar：状态栏；

下面的属性用来决定显示哪一个元素：

ShowControls属性：是否显示控制栏（包括播放控件及可选的声音和位置控件）；

ShowAudioControls属性：是否在控制栏显示声音控件（静音按钮和音量滑块）；

ShowPositionControls属性：是否在控制栏显示位置控件（包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑）；

ShowTracker属性：是否显示搜索栏；

ShowDisplay属性：是否显示显示面板（用来提供节目与剪辑的信息）；

ShowCaptioning属性：是否显示字幕显示面板；

ShowGotoBar属性：是否显示转到栏；

ShowStatusBar属性：是否显示状态栏；

播放列表

媒体播放器提供下面的方法来访问播放列表中的剪辑：

Next方法，跳到节目（播放列表）中的下一个剪辑；

Previous方法，跳回到节目中的上一个剪辑；

媒体播放器的一个特性是能够预览节目中的每一个剪辑，使用如下属性：

PreviewMode属性，决定媒体播放器当前是否处于预览模式；

CanPreview属性，决定媒体播放器能否处于预览模式；

在windows媒体元文件中，可以为每一个剪辑指定预览时间——PREVIEWDURATION,如果没有指定，那么默认的预览时间是10秒钟。

你也可以用Windows媒体元文件来添加watermarks与banners，元文件也支持插入广告时的无间隙流切换。

节目信息

使用GetMediaInfoString方法可以返回相关剪辑或节目的如下信息：

文件名：Filename

标题：Title

描述：Description

作者：Author

版权：Copyright

级别：Rating

URLs：logoicon、watermark、banner的地址

剪辑信息可以放在媒体文件中，也可以放在Windows媒体元文件中，或者两者都放。如果在元文件中指定了剪辑信息，那么用GetMediaInfoString方法返回的就是元文件中的信息，而不会返回剪辑中包含的信息。

在元文件中，附加信息可以放置在每一个剪辑或节目的PARAM标签中。你可以为每个剪辑添加任意多个PARAM标签，用来存储自定义的信息或链接到相关站点。在PARAM标签中的信息可以通过GetMediaParameter方法来访问。

下面的属性返回有关大小和时间的信息：

ImageSourceHeight、ImageSourceWidth：返回图像窗口的显示尺寸；

Duration属性，返回剪辑的长度(秒)，要检测这个属性是否包含有效的数值，请检查IsDurationValid属性。(对于广播的视频，其长度是不可预知的)。

字幕

你可以用.smi文件来为你的节目添加字幕。媒体播放器支持下面的属性来处理字幕：

SAMIFileName属性，指定.smi文件的名字；

SAMILang属性，指定字幕的语言(如果没有指定则使用第一种语言)；

SAMIStyle属性，指定字幕的文字大小和样式；

ShowCaptioning属性，决定是否显示字幕显示面板；

脚本命令

伴随音频、视频流，你可以在流媒体文件中加入脚本命令。脚本命令是多媒体流中与特定时间同步的多对Unicode串。第一个串标识待发命令的类型，第二个串指定要执行的命令。

当流播放到与脚本相关的时间时，控件会向网页发送一个ScriptCommand事件，然后由事件处理进程来响应这个事件。脚本命令字符串会作为脚本命令事件的参数传递给事件处理器。

媒体播放器会自动处理下面类型的内嵌脚本命令：

1)URL型命令：当媒体播放器控件收到一个URL型的命令时，指定的URL会被装载到用户的默认浏览器。如果媒体播放器嵌在一个分帧的HTML文件中，URL页可以装载到由脚本命令指定的帧内。如果脚本命令没有指定一个帧，将由DefaultFrame属性决定将URL页装入哪一帧。

你可以通过设置InvokeURLs属性来决定是否自动处理URL型的脚本命令。如果这个属性的值为false，媒体播放器控件将忽视URL型命令。但是脚本命令事件仍会触发，这就允许你有选择地处理URL型命令。

URL型命令指定的是URL的相对地址。基地址是由BaseURL属性指定的。媒体播放器控件传送的脚本命令事件的命令参数是链接好的地址。

2)FILENAME型命令：当媒体播放器控件收到一个FILENAME型的命令时，它将FileName属性设置为脚本命令提供的文件，之后媒体播放器会打开这个文件开始播放。媒体播放器控件总是自动处理FILENAME型命令，不象URL型命令，它们不能被禁止。

3)TEXT型命令：当媒体播放器控件收到一个TEXT型的命令时，它会将命令的内容显示在控件的字幕窗口。内容可以是纯文本的，也可以是HTML。

4)EVENT型命令：当媒体播放器控件收到一个EVENT型的命令时，它会在媒体元文件中搜索EVENT元素的NAME属性。如果NAME属性与脚本命令中的第二个字符串匹配，媒体播放器控件就执行包含在EVENT元素中的条目。

5)OPENEVENT型命令：当媒体播放器控件收到一个OPENEVENT型的命令时，它会在媒体元文件中检查EVENT元素，并打开匹配的标题，但不播放，直到收到来自EVENT型命令的同名真实事件。

捕捉键盘和鼠标事件

EnableContextMenu与ClickToPlay属性为用户提供了在图像窗口进行操作的方法。

如果EnableContextMenu属性为true，在图像窗口右击鼠标可以打开关联菜单，如果将ClickToPlay属性设为true，用户可以单击图像窗口进行播放与暂停的切换。

要接收鼠标移动和单击事件，请将SendMouseMoveEvents和SendMouseClickEvents属性设为true。鼠标事件有：

MouseDown，当用户按下鼠标时产生；

MouseUp，当用户释放鼠标时产生；

MouseMove，当用户移动鼠标时产生；

Click，当用户在媒体播放器上单击鼠标按钮时产生；

DbClick，当用户在媒体播放器上双击鼠标按钮时产生；

要接收键盘事件，请将SendKeyboardEvents属性设为true。键盘事件有：

KeyDown，当用户按下一个键时产生；

KeyUp，当用户释放一个键时产生；

KeyPress，当用户按下并释放一个键时产生；

监测流状态与网络链接

流状态属性包括：

PlayState：播放状态；

OpenState：打开状态；

Bandwidth：带宽；

支持的事件有：

OpenStateChange：打开状态改变(仅当SendOpenStateChangeEvents属性为true时触发)

PlayStateChange：播放状态改变(仅当SendPlayStateChangeEvents属性为true时触发)

EndOfStream：流结束时触发；

NewStream：打开新流时触发；

网络接收属性包括：

ReceptionQuality：接收质量；

ReceivedPackets：已经收到的包；

LostPackets：丢失的包；

监测缓冲的属性有：

BufferingTime：缓冲时间；

BufferingCount：缓冲次数；

BufferingProgress：缓冲进程；

Buffering：缓冲事件；

错误处理

媒体播放器提供了内建的错误处理功能——在对话框或状态栏显示错误信息。另外，你可以自己添加错误处理程序。如果SendErrorEvents属性设置为true，将不会显示错误框，而是发送错误事件；如果SendErrorEvents属性设置为false，将显示错误框，而是发送错误事件。

媒体播放器支持下面的错误处理事件：

Error事件，指有危险性错误发生；

Warning事件，指发生了非危险性的错误；

当你的应用程序接收到一个错误事件，你可以检测下面的属性来确定具体的错误信息：

HasError：检测目前的媒体播放器是否有错误；

ErrorCode：提供与该类型错误相关的代码值；

ErrorDescription：提供错误的描述信息；

ErrorCorrection：指定媒体播放器对该类型的错误进行校正；

播放CD

媒体播放器将CD看作（在每个音轨的开头具有标记的）单一音频流。要在网页中使用CD，你需要将FileName属性设为CDAUDI，必须带有冒号，如下所示：

复制代码

代码如下:

<HTML>

<HEAD><TITLE>CDAudioPlaybackExample</TITLE></HEAD>

<BODY>

<OBJECTID="MediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

WIDTH="320"

HEIGHT="508"

STYLE="position:absolute;left:0px;top:70px;">

<PARAMNAME="FileName"VALUE="cdaudi">

<PARAMNAME="AutoStart"VALUE="0">

<PARAMNAME="ShowControls"VALUE="1">

<PARAMNAME="ShowStatusBar"VALUE="1">

<PARAMNAME="ShowDisplay"VALUE="1">

</OBJECT>

</BODY>

</HTML>

之后你可以用Play方法播放CD了。

你可以在windows媒体元文件中指定播放顺序以及每个音轨的信息。示例如下：

<ASXVERSION="3.0">

<TITLE>CDAudiowiththeMediaPlayer</TITLE>

<AUTHOR>WindowsMediaTechnologies</AUTHOR>

<ENTRY>

<TITLE>Track1:Title1</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="1"/>

<ENDMARKERNUMBER="2"/>

</ENTRY>

<ENTRY>

<TITLE>Track2:Title2</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="2"/>

<ENDMARKERNUMBER="3"/>

</ENTRY>

<ENTRY>

<TITLE>Track3:Title3</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="3"/>

<ENDMARKERNUMBER="4"/>

</ENTRY>

<ENTRY>

<TITLE>Track4:Title4</TITLE>

<REFhref="/blog/cdaudi"/>

<STARTMARKERNUMBER="4"/>

</ENTRY>

</ASX>

在线咨询

上一篇：从你在浏览器输入url到发起http请求，这过程到底发生了什么？
下一篇：怎么用html5新增元素制作用户注册页面？这个示例告诉你！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础篇-17HTML之视频播放

flash崛起--网页标准的耻辱

flash衰败--HTML5崛起并全面普及

flash兴起衰败皆因自己

html5媒体新标准--Video标签

Video标签的属性

source标签

总结

您的项目需求