第三讲 HTML5 视频播放事件属性及自己做的一个简单的html5的视频
2013-09-06 10:04
495 查看
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设置视频播放器的宽度。
*******************************************************下面是自己写的一个html5简单的视频
<!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>
视频格式：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设置视频播放器的宽度。
*******************************************************下面是自己写的一个html5简单的视频
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 视频播放事件属性与API控件
- HTML5 视频播放事件属性与API控件--理论
- HTML5与微信开发（2）-视频播放事件及API属性
- HTML5 音视频标签的方法、属性和事件
- 一个html5播放视频的video控件只支持android的默认格式mp4和3gp
- 做一个简单的大视频截取播放功能
- 一个imageview播放动画，如此简单（包含imageview的所有属性，方法）
- html5 中简单视频音频制作---新添h5属性
- html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下载 （可播放mp4、avi、mpg、asx、swf各种文件的视频播放代码）
- 一个html5播放视频的video控件只支持android的默认格式mp4和3gp
- Android之使用VideoView组件播放一个简单的视频
- 【学习笔记】HTML5视频的属性、方法、事件介绍 详解
- html5 播放多个视频。一个接一个的播放
- HTML5简单示例-播放视频
- 音频、视频播放时属性、事件等操作
- 自己动手写一个简单的IOC框架，使用注解绑定资源和事件
- HTML5 视频标签的方法、属性和事件
- Android之使用MediaPlayer和SurfaceView组件播放一个简单的视频
- 一个简单的播放视频的小程序
- Directshow学习笔记五-----一个简单的视频播放程序（个人学习总结，仅供参考）