视频初学总结

一直播，bilibili站，秒拍对应的播放形式以及移动端和pc端都是怎么处理的

主要封装格式一览

文件有不同的格式，用不同的后缀表示：avi，rmvb，mp4，flv，mkv等等

(视频数据和音频数据打包成一个文件的规范)

一直播

视频多为m3u8（包括直播与回放）

bilibili站

视频多为flash 下的swf   flv    mp4格式直播为m3u8

秒拍

视频多为mp4格式

在线抓取以上三个视频站的在线视频

bilibili.

flv格式的视频放在乐视云下，没有授权无法读取

mp4文件格式可以读取，但是有时间限制，多为15分钟。超过时间，视频自动不能访问

因此，视频再现抓取有难度

一直播

M3u8(UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件(ts文件)的网络地址进行在线播放。)

现以用blob二进制加载ts视频流。

如用swf片段，可以读取

秒拍

多为mp4格式可以抓取。

mp4链接自动添加时间戳参数，每次点击会有新的时间戳生成。不必担心时间限制

数据流的处理

在线拿到视频流后在web加载播放

四种形式

1、flash

2、原生video

3、video+flash混合播放

4、h5播放器

Flash

因为swf 以及flv格式都是属于flash的视频文件，可以用flash 嵌入

Flash嵌入基础：embed和object

两个标签可以在网页上嵌入flash。

1、embed，所有的浏览器都支持它

<embed type="application/x-shockwave-flash"» src="myContent.swf" width="300"height="120"  » pluginspage="http://www.adobe.com/go/getflashplayer"/> <noembed>Alternative content</noembed> 

2、object

大多数现代浏览器实现了遵循标准的方式，将embed标签替换为object的MIME类型，以此来确定插件的类型。 这种方式是各种浏览器通用的，所以是比较好的实现。

codebase参数，这个参数通常指向Adobe的Flash插件安装包位置，用来在浏览器没有安装插件的时候自动下载

<object type="application/x-shockwave-flash"» data="myContent.swf" width="300"height="120">     <p>Alternativecontent</p> </object> 

3、object 和 embed 标签来嵌入，

为了浏览器兼容性，有的浏览器支持 object，有的支持 embed这种方法是 Macromedia 一直以来的官方方法，最大限度的保证了 Flash 的功能，没有兼容性问题

属性重复，一旦修改属性，两个都需要修改

flash的兼容问题：

Adobe宣布终止移动设备flash技术研发，安卓自此失去技术支持而无法运行flash

苹果的产品和系统已经全面屏蔽flash了

因此移动端不能使用flash

原生video

video是h5的新特性

HTML5原生仅支持播放 mp4/webm 格式，不支持 FLV

HTML5 的 video 可以很方便的使用 JavaScript 对视频内容进行控制等等，功能十分强大，同时代码比较少加快加载速度。此外跨平台性比较好，特别是一些平板、手机等。例如苹果公司的产品不支持 flash 仅支持 HTML5 中的 video 功能。

HTML5 的兼容性问题是个硬伤，可以在网页中使用 video 来播放视频，但使用早期浏览器的访问者可能无法正常观看这个视频

video+flash混合播放

为老旧浏览器做兼容

<video width="320" height="240" controls="controls">            <source src="movie.mp4" type="video/mp4" />            <source src="movie.ogg" type="video/ogg" />            <source src="movie.webm" type="video/webm" />             <object data="movie.mp4" width="320" height="240">                    <embed src="movie.swf" width="320" height="240" />           </object> </video>

视频转换为多种格式适应浏览器

添加WebM格式的视频提供对Opera的支持

用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连元素都不支持的老浏览器。

可以优先使用Flash，而HTML5作为后备措施

也可以优先使用 HTML5，而Flash作为后备措施

h5播放器

Video.js

Video.js是一种网络视频播放器，它是为HTML5开发的。它支持HTML5和Flash视频，以及YouTube和Vimeo(通过插件)。它支持PC和移动设备上播放视频。

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

https://github.com/videojs/video.js

flv.js

因为移动端不能使用flash，所以flv的视频格式无法被加载

但是现在的h5播放器可以通过视频流转换解决这个问题

可以参考bilibili开源项目flv.js

https://github.com/Bilibili/flv.js

移动端对于video的操作

移动端视频video的android兼容，去除播放控件、全屏等

参考:https://segmentfault.com/a/1190000006857675

现在本厂页面（例如：http://v.smzdm.com/p/1737_1.html）

h5播放器使用的video原生标签，对控件更改样式，绑定功能

支持mp4格式的播放

在ios端采用原生播放，ios任意浏览器web打开时会自动调起全屏以及cotorl控件

如果页面中载入的事swf,flv格式的视频在移动端无法播放时不显示播放器并点击跳到落地页面