视频播放- video标签

最新推荐文章于 2024-10-08 23:55:52 发布

zanos

最新推荐文章于 2024-10-08 23:55:52 发布

阅读量857

点赞数

分类专栏： HTML 5 - Up and running 文章标签： video codec h.264 html javascript flv

本文链接：https://blog.csdn.net/zanos/article/details/7101917

版权

HTML 5 - Up and running 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 5支持很多种格式的音视频编码与封装格式，使之可与flash player相抗衡。

支持封装格式有mp4, m4v, mov, flv, ogv, webm, avi等。

其中支持的视频压缩格式有：H.264, Theora, VP8，音频压缩格式有mp3, aac, vorbis等。

在HTML 5语言中，视频的支持很简单，<video>标签可以定义一个视频元素。如：

<video src="somevideo.ext" width="320" height="240" autoplay></video>

为了防止浏览器确认可以播放文件某个视频，可以准备一个视频的多个备份，由HTML 5沟通用哪个文件格式进行播放，示例：

<video width="320" height="240" controls>
	<source src="video.mp4" type='video/mp4; codec="avc.42E01E, mp4a.40.2"'>
	<source src="video.webm" type='video/webm; codec="vp8, vorbis"'>
	<source src="video.ogv" type='video/ogg; codec="theora, vorbis"'>
</video>

也可以通过preload来控制页面加载时开始加载视频，但不开始播放，也可以为preload设为none来保证视频在用户的需求下才开始加载，而播放都可以由Javascript代码来触发。比如如下页面实现：

<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312" />
<title>Canvas</title>


<script language="Javascript">
function play_video()
{
	var myvideo = document.getElementById("myvideo");
	myvideo.play();
}
</script>


</head>


<body>
<p align=center>
<video id="myvideo" src="test.mp4" width="320" height="240"  οnclick="play_video()" preload></video>
</p>


<p>
<br>
By zanosy@126.com
</p>


</body>
</html>