video视频详解

Love The Way You Lie 2022-04-16 02:21 313阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

视频去腾讯下载

enob

如何让视频下载的标识不出现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

不想有全频 加 nofullscreen

# HTML5的Video标签的属性,方法和事件汇总 #

> 前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。

## <video>标签的属性 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3][]

--------------------

*  src ：视频的属性
 *  poster：视频封面，没有播放时显示的图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4][]

*  preload：预加载， 不播放视频，也会加载进度条

![20181115185636705.png][]

*  autoplay：自动播放

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5][]

静音，想让自动播放，就要先打到静音的状态

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 6][]

*  loop：循环播放

![2018111518554423.png][]

控制音量，通过js来控制

![20181115185852852.png][]

*  controls：浏览器自带的控制条
 *  width：视频宽度
 *  height：视频高度

如何控制播放时间，单位是秒

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 8][]

切换播放效果，就是切换播放地址

重新下载一个视频

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 9][]

每次点击进度条的时候，console控制台会触发progress,因为点击那个位置的时候，视频和音频都没有下载下来；当我点击那里的时候，就会下载视频，然后可以播放了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 10][]

如何监听用户改变了时间点的位置呢

一个事件是seeking,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 11][]

当点击某个时间点时，触发

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 12][]

另一个事件是seeded

![20181115191543676.png][]

触发seeded是当用户点击某个时间点后，先触发seeking，然后触发seeded，告诉我们视频可以播放了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 13][]

第三个：waiting

当用户点击某个时间点之后，视频加载失败，只要3视频没有加载，就会触发waiting,可以通过快速点击某一事件点，让视频或者音频加载不出俩

来

![20181115191616203.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 14][]

第四个 playing

当解码和视频加载完成之后，点击暂停就会触发playing

![20181115192433538.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 15][]

如何跟踪播放的时间点呢

![20181115192651155.png][]

在播放过程中交替触发progerss 和timeupdate,因为会一直下载视频

![20181115192522196.png][]

如何知道视频播放完了呢，商业用途，当视频播放完后，插入广告

![20181115192803248.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 16][]

视频播放出错如何知道呢

![20181115192937760.png][]

给浏览器断网

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 17][]

视频请求31次之后，触发了error事件，传入参数e，可以打印出错误对象

![20181115193157357.png][]

**html 代码**

<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>  
      //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象

**获取video对象**

Media = document.getElementById("media");

## Media方法和属性： ##

> HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

*  Media.error; //null:正常
 *  Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

***//网络状态 ***  
\- Media.currentSrc; //返回当前资源的URL  
\- Media.src = value; //返回或设置当前资源的URL  
\- Media.canPlayType(type); //是否能播放某种格式的资源  
\- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源  
\- Media.load(); //重新加载src指定的资源  
\- Media.buffered; //返回已缓冲区域，TimeRanges  
\- Media.preload; //none:不预载 metadata:预载资源信息 auto:

***//准备状态 ***  
\- Media.readyState;//1:HAVE\_NOTHING 2:HAVE\_METADATA 3.HAVE\_CURRENT\_DATA 4.HAVE\_FUTURE\_DATA 5.HAVE\_ENOUGH\_DATA  
\- Media.seeking; //是否正在seeking

***//回放状态***

*  Media.currentTime = value; //当前播放的位置，赋值可改变位置
 *  Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
 *  Media.duration; //当前资源长度 流返回无限
 *  Media.paused; //是否暂停
 *  Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
 *  Media.playbackRate = value;//当前播放速度，设置后马上改变
 *  Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
 *  Media.seekable; //返回可以seek的区域 TimeRanges
 *  Media.ended; //是否结束
 *  Media.autoPlay; //是否自动播放
 *  Media.loop; //是否循环播放
 *  Media.play(); //播放
 *  Media.pause(); //暂停

***//视频控制***

*  Media.controls;//是否有默认控制条
 *  Media.volume = value; //音量
 *  Media.muted = value; //静音  
    ***TimeRanges(区域)对象***
 *  TimeRanges.length; //区域段数
 *  TimeRanges.start(index) //第index段区域的开始位置
 *  TimeRanges.end(index) //第index段区域的结束位置

***//相关事件***

var eventTester = function(e){
         Media.addEventListener(e,function(){
             console.log((new Date()).getTime(),e)
         },false);
     }

*  eventTester("loadstart"); //客户端开始请求数据
 *  eventTester("progress"); //客户端正在请求数据
 *  eventTester("suspend"); //延迟下载
 *  eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
 *  eventTester("loadstart"); //客户端开始请求数据
 *  eventTester("progress"); //客户端正在请求数据
 *  eventTester("suspend"); //延迟下载
 *  eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
 *  eventTester("error"); //请求数据时遇到错误
 *  eventTester("stalled"); //网速失速
 *  eventTester("play"); //play()和autoplay开始播放时触发
 *  eventTester("pause"); //pause()触发
 *  eventTester("loadedmetadata"); //成功获取资源长度
 *  eventTester("loadeddata"); //
 *  eventTester("waiting"); //等待数据，并非错误
 *  eventTester("playing"); //开始回放
 *  eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
 *  eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
 *  eventTester("seeking"); //寻找中
 *  eventTester("seeked"); //寻找完毕
 *  eventTester("timeupdate"); //播放时间改变
 *  eventTester("ended"); //播放结束
 *  eventTester("ratechange"); //播放速率改变
 *  eventTester("durationchange"); //资源长度改变
 *  eventTester("volumechange"); //音量改变

好文要顶 关注我 收藏该文 ![icon_weibo_24.png][] ![wechat.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220416/3f4a1c4ab72143778644546da90976ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220416/03e8ecc10b08401882f72a23f82531cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2]: /images/20220416/4a297b98681c40dcada91f4e1afd181e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3]: /images/20220416/7c9b4358c957417fb11637b93c1d0223.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4]: /images/20220416/00413c0317b04da58801bfbc7764511e.png
[20181115185636705.png]: /images/20220416/3a822810e182424490b945559bf5f2aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5]: /images/20220416/f0c69061d44b4bf2ac6512659789b76b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 6]: /images/20220416/907371198c8447b09a462672d1481d70.png
[2018111518554423.png]: /images/20220416/0e4db2e48e794447bb851e351a6cde0d.png
[20181115185852852.png]: /images/20220416/24b01f8b5bd1499dbddf174530906301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 7]: /images/20220416/283488ed3da14794893dab3dc9af3dc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 8]: /images/20220416/76c1616f10574870968083fcfa93d42e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 9]: /images/20220416/70eef218ba32466a9d29fc2902038f61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 10]: /images/20220416/a585bd3749224d289efda1b2eee7abc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 11]: /images/20220416/50eb3d947f834b5395e1586e67125712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 12]: /images/20220416/735b3ca8eed746e49c4d5f7c1776b578.png
[20181115191543676.png]: /images/20220416/ab0aa81d44a548099ac5c0c1ab78f258.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 13]: /images/20220416/4c893c497c2a48f08844f455975eacdd.png
[20181115191616203.png]: /images/20220416/6bbb2f53018b46ae92c46b9dc0507225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 14]: /images/20220416/54ed64e5f5f44eaaadadfcc2164a5f59.png
[20181115192433538.png]: /images/20220416/c6acbd9ae2f14d7a90342ea5c64b7f5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 15]: /images/20220416/aa4fe446f7a545dcba3ded972405e696.png
[20181115192651155.png]: /images/20220416/fb0c24a8f3c14e87bc83ff1fc0d55804.png
[20181115192522196.png]: /images/20220416/cfa9518c154d43a699aa299dd55a605b.png
[20181115192803248.png]: /images/20220416/c7cd32db64b4460b831d037e089ca300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 16]: /images/20220416/ed1382d25d134ea0b3d3bdbbe69df03f.png
[20181115192937760.png]: /images/20220416/7d440a2f89d24e7fa959df77ee78178c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 17]: /images/20220416/a8937b1e12b748df98dbdbfc99aa63f5.png
[20181115193157357.png]: /images/20220416/acd6ebbdea29476eaca6416b1324fda7.png
[icon_weibo_24.png]: https://common.cnblogs.com/images/icon_weibo_24.png
[wechat.png]: /images/20220416/8dc415155939403190b38b87d0572f47.png