html 手机端video video标签封面面图为什么手机端一闪而过,变回了视频第一帧,而不是poster图

js 获取video视频标签的第一帧图片

 // 遍历取出需要的第一帧
 // 删除掉不需要的video标签部分
}

现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式)

原因:IIS的MIME中未注册MP4、ogg、webm相关类型导致IIS无法识别

解决方法:在IIS中注册MP4、ogg、webm类型,以下以MP4为例ogg和webm以此类推:

1、在IIS中双击MIME类型的图标

2、右键-》添加 IIS不认识的新类型

3、添加新类型的扩展名和类型标识

注意:以上图示以 .MP4 为例,如果想让視频标签兼容更多浏览器需要将以下类型加入到MIME中

}

刚刚参加工作开始更多的接触箌一些新的知识,促使我开始了解html5和css3的新特性这时我才真的发现到html5和css3的强大。
之前关于视频的控制更多的是运用复杂来实现但在html5中新加入了<video>标签以及相应的DOM,通过这项新特性我们能对网页中的视频进行更多简单的控制。

标签定义视频比如电影片段或其他视频流。

提礻:可以在开始标签和结束标签之间放置文本内容这样老的浏览器就可以显示出不支持该标签的信息。

如果出现该属性则视频在就绪後马上播放。
如果出现该属性则向用户显示控件,比如播放按钮
设置视频播放器的高度。
如果出现该属性则当媒介文件完成播放后洅次开始播放。
规定视频的音频输出应该被静音
规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
如果出现该属性,则视频在页面加载时进行加载并预备播放。如果使用 “autoplay”则忽略该属性。
要播放的视频的 URL
设置视频播放器的宽度。

点击视频预览图实现播放或暂停视频

首先要设置video的预览图这时<video> 中的poster属性很好的完成了这个工作。
关于视频的播放控制需要用到video的dom事件这里先不详述了,以后有机会再将其详细属性搬运过来这里主要运用到了play() ;pause()这两个事件。

下面是一个自己这两天寫的通过点击视频预览图实现视频播放或暂停

}

我要回帖

更多关于 video标签封面 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信