DayDayUP之HTML5学习笔记四----使用Video标签制作简单的播放器
2014-04-22 15:54
951 查看
HTML5支持的视频格式为:OGG、WebM、MEPG4。
代码片段:
<video id="video" src="3.webm" controls="controls" width="400" height="300"></video>
<script>
var video=document.getElementById('video');
//播放视频
function playMedia()
{
video.play();
}
//视频暂停
function pauseMedia()
{
video.pause();
}
//快进5s
function fastForward()
{
video.currentTime += 5;
}
//快退5s
function rewind()
{
video.currentTime -= 5;
}
//静音
function mute(obj)
{
if(video.muted)
{
video.muted=false;
obj.innerHTML="静音";
}else
{
video.muted=true;
obj.innerHTML="不静音";
}
}
//音量加。注意:音量的值为0~1
function volumeUp()
{
//默认值为0-1
video.volume+=0.1;
}
//音量减。注意:音量的值为0~1
function volumeDown()
{
video.volume-=0.1;
}
//加速播放
function acceleratedplay()
{
video.playbackRate=5;
}
//正常播放
function Normalplay()
{
video.playbackRate=1;
}
//减速播放。注意:正常默认的速度为1
function decelerationplay()
{
video.playbackRate=1/5;
}
</script>
代码片段:
<video id="video" src="3.webm" controls="controls" width="400" height="300"></video>
<script>
var video=document.getElementById('video');
//播放视频
function playMedia()
{
video.play();
}
//视频暂停
function pauseMedia()
{
video.pause();
}
//快进5s
function fastForward()
{
video.currentTime += 5;
}
//快退5s
function rewind()
{
video.currentTime -= 5;
}
//静音
function mute(obj)
{
if(video.muted)
{
video.muted=false;
obj.innerHTML="静音";
}else
{
video.muted=true;
obj.innerHTML="不静音";
}
}
//音量加。注意:音量的值为0~1
function volumeUp()
{
//默认值为0-1
video.volume+=0.1;
}
//音量减。注意:音量的值为0~1
function volumeDown()
{
video.volume-=0.1;
}
//加速播放
function acceleratedplay()
{
video.playbackRate=5;
}
//正常播放
function Normalplay()
{
video.playbackRate=1;
}
//减速播放。注意:正常默认的速度为1
function decelerationplay()
{
video.playbackRate=1/5;
}
</script>
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- DVI 视频接口图文解析
- 视频分割 Ultra Video Splitter V4.0.4 汉化版 下载
- User Scripts: Video Download by User Scripts
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- 视频转换大师WinMPG Video Convert 6.63
- 显示youtube视频缩略图和Vimeo视频缩略图代码分享
- html5在android中的使用问题及技巧解读
- 非html5实现js版弹球游戏示例代码
- html5 canvas js(数字时钟)实例代码
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
- 使用js检测浏览器是否支持html5中的video标签的方法
- 通过javascript把图片转化为字符画
- JavaScript使用HTML5的window.postMessage实现跨域通信例子
- Android获取SD卡上图片和视频缩略图的小例子
- HTML5附件拖拽上传drop & google.gears实现代码
- javascript中download关键字的方法名调用问题
- 《HTML+CSS3权威指南》笔记摘要 - 目录