video视频播放器属性

最新推荐文章于 2024-05-15 10:54:10 发布

阿酷tony

最新推荐文章于 2024-05-15 10:54:10 发布

阅读量5.2k

点赞数

分类专栏：文章存档文章标签： video视频 html5视频

本文链接：https://blog.csdn.net/ffffffff8/article/details/121895436

版权

文章存档专栏收录该内容

218 篇文章 2 订阅

订阅专栏

<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" />
Your browser does not support the video tag.
</video>

 <video
    preload="auto" /** 视频优先加载 **/
    autoplay=true /** 自动播放 **/
    muted=false /** 开启音频 **/
    webkit-playsinline="true" /** 防止IOS用户播放视频时自动全屏 **/
    playsinline="true"
    x-webkit-airplay="allow" /** 支持Airplay的设备（如：音箱、Apple TV)播放 **/
    x5-video-player-type="h5-page" /** 启用X5内核同层渲染 **/
    x5-video-orientation="portraint"
    style="object-fit:cover;"
>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"  type="video/mp4">
</video>

video视频播放器属性

<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>

src: 视频的URL
poster: 视频封面
currentTime：视频当前播放位置，以秒为单位
duration：视频的时长，以秒为单位
loop：设置视频是否循环播放，值为true/false。当为true时，视频播放结束后，自动返回视频开始的地方。
autoplay: 设置视频是否自动播放，值为true/false。
muted：设置视频的音频默认状态，值为true/false,。当为false时，静音。
webkit-playsinline='true' playsinline='true': 视频在元素区域内播放。防止ios用户视频播放自动全屏
preload='auto': 优先加载视频
x5-video-player-type='h5-page': 启用X5内核同层渲染
x5-video-orientation='portraint': 设置播放器支持的方向，竖屏

video事件

loadstart: 在视频开始加载时触发，给currentTime赋值(历史播放记录或0)。
durationchange: 元信息已载入或已改变，视频的长度发生了改变。获取到视频长度(duration，并给currentTime赋值(历史播放记录或0))。
playing: 在视频开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
pause: 播放暂停时触发。
timeupdate: currentTime改变, 更新播放进度。处理播放进度条
seeked: 指定播放位置
waiting: 缓冲
ended: 播放结束, 重置状态
WeixinJSBridgeReady: 在微信中使用video，需要监听weixinJSBridgeReady事件, 在回调函数里执行play()命令。

直播协议

HLS(HTTP Live Streaming)由Apple提出的直播流协议。IOS和高版本Android都支持HLS。HLS主要由.m3u8和.ts两种播放文件。HLS具有高兼容性，高可扩展性，但会直播延时。HLS协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个ts文件，每个ts文件包含5秒的视频内容，那么整体的延迟就是25秒。
RTMP(Real Time Messaging Protocol)是Macromedia开发的一套视频直播协议，现在属于Adobe。RTMP基于flash无法在IOS的浏览器里播放，但是实时性比HLS要好。
HTTP-FLV针对于FLV视频格式做的直播分发流，延时低。但移动端不支持。

结论：HTTP-FLV延时低，优先使用。若设备不支持HTTP-FLV，使用flv.js。若设备不支持flv.js，则使用HLS，但HLS延迟大。