video标签定义视频,比如电影片段或者其他视频流。目前video标签只支持MP4,WebMail,Ogg格式的视频。
兼容性:IE8以及更早的版本不支持video标签。其他现代浏览器均支持。
各浏览器对于各个视频格式的支持如下:
- MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
标签的属性和各个值代表的意思
<video id="my-video" class="movie-video" width="320" height="240" controls preload="auto" poster="img/adpic/video.png(设计所说的视频封面)">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
$(document).on('tap','.movie-video',vidplay);
function vidplay() {
var video = document.getElementById("my-video");
if (video.paused) {
video.play();
} else {
video.pause();
$('.movie-video').attr("contols","controls");
}
}
##在这次做需求的时候遇见了视频播放只有声音没有画面的情况。最后定位到是视频格式的问题,没有把导出的时候没有把编码选为h264。
**视频文件一般较大。而网络的带宽有限,所以需要视频文件不影响画质的情况下尽可能的小。有一个小窍门,能够不影响画质的情况下把视频文件变小。我是先把源文件转为avi, 这样大小会自动压缩,也就是从800m到了200m接着再转回mp4在这个时候选编码为h264 最后出来就只有100多M。这样就得到了想要的格式的小的视频啦~
##做的页面在h5的浏览器中运行的好好的。唯独在ios9中播放异常。原来是iOS9对于网络协议http要求较为严格。之前的iOS8和之后的iOS10 都对这一要求放开了。所以,只需要更改网络协议为https。在iOS9上播放页页正常了。