1、视频格式的简单介绍
视频格式:avi、rmb、wmv、mpeg4、ogg、webm
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了
HTML5支持的格式:
Ogg
= 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4
= 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM
= 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
2、HTML5视频标签<video>属性
<video src="movie.mp4" controls="controls"> </video>
<video src="movie.mp4" controls="controls">
浏览器不支持HTML5的视频播放功能
</video>
<video width="300" controls="controls" …>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>
3.HTML5视频标签<video>属性
属性 值 描述
autoplay
autoplay
如果出现该属性,则视频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src
url
要播放的视频的 URL。
width
pixels
设置视频播放器的宽度。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
var video = $('#php100');//指定了对象
$('#play').click(function () {
video[0].play();
})
$('#pause').click(function () {
video[0].pause();
})
$('#go10').click(function () {
video[0].currentTime += 10;
})
$('#back10').click(function () {
video[0].currentTime -= 10;
})
$('#rate1').click(function () {
video[0].playbackRat+=2;
})
$('#rate0').click(function () {
video[0].playbackRat -=2;
})
$('#volumel').click(function () {
video[0].volume += 0.1;
})
$('#volume0').click(function () {
video[0].volume -= 0.1;
})
$('#muted1').click(function () {
video[0].muted = true;
})
$('#muted1').click(function () {
video[0].muted = false;
})
$("#full").click(function () {
video[0].webkitEmterFullscreen();//webkit类型的浏览器
video[0].mozRequestFullScreen();//支持火狐浏览器
})
})
</script>
</head>
<body>
<video id="php100" src="vi/21.mp4" width="400" controls="controls" poster="images/loding.jpg">
<source src="video.webm" type="video/webm"/>//<!--判断是否支持其播放器-->
<source src="video.ogv" type="audio/ogg"/>
<source src="vi/21.mp4" type="audio/mp4" />
您的浏览器不支持html5
</video>
<hr />
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="go10">快进10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度—</button>
<button id="volumel">声音+</button>
<button id="volume0">声音-</button>
<button id="muted1">静音</button>
<button id="muted2">解除静音</button>
<button id="full">全屏</button>
</body>
</html>