您的位置：首页 > Web前端 > JavaScript

视频播放- video标签

2011-12-25 23:12 337 查看

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" onclick="play_video()" preload></video>
</p>

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

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： video codec h.264 html javascript flv

相关文章推荐

新的分享

章节导航