HTML5视频播放
1.检测浏览器是否支持html5视频播放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！"
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！";
}
else
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！";
}
else
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！"
}
}
</script>
<title>3.3.1</title>
</head>
<body>
<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
<button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">检测</button>
</div>
</body>
</html>
2.视频里面的标签
1. autoplay 自动播放视频文件
<audio scc=".ogg .mp4 .webm" autoplay></span>
2.preload 预加载。提供三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音频文件
<audio scc=".ogg .mp4 .webm" preload=”metadata”></audio>
3.poster元素
设置当前元素不可用时，可以向用户展现一副图片
<video scc=".ogg .mp4 .webm" poster=“.jpg”></video >
4.loop元素
设置是否循环播放视频文件
<video scc=".ogg .mp4 .webm" loop></ ideo >
5.controls属性
设置是否添加浏览器自带的播放控制器，其中包括播放、暂停、声音等。如果需要显示播放控制器，则添加该属性
<video scc=".ogg .mp4 .webm" controls></video >
6.width属性和height属性
设置视频的宽度和高度
<video scc=".ogg .mp4 .webm" width=”” height=””></video >
7.muted属性
设置页面加载时，播放器是否被静音。
3 vioeo/audio方法标签
1、play方法
除了播放器自己的播放功能外，用户还可以在脚本中使用play方法来控制音视频的播放功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.5.1</title>
<script>
function play()
{
var video=document.getElementById("MyVideo");
video.play();
}
</script>
</head>
<body>
<video id="MyVideo" src="movie.mp4" controls></video>
<button onClick="play()">play</button>
</body>
</html>
显 示
2.pause方法
与play方法对应的pause方法用于设置暂停播放音视频功能，pause方法也需要在脚本中设置才能使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.5.2</title>
<script>
function pause()
{
var video=document.getElementById("MyVideo");
video.pause();
}
</script>
</head>
<body>
<video id="MyVideo" src="movie.mp4" controls></video>
<button onClick="pause()">pause</button>
</body>
</html>
3.load方法
调用该方法可以重新加载音视频文件进行播放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.5.3</title>
<script>
function load()
{
var video=document.getElementById("MyVideo");
video.load();
}
</script>
</head>
<body>
<video id="MyVideo" src="movie.mp4" controls></video>
<button onClick="load()">load</button>
</body>
</html>
4.canPlayType方法
该方法用于检测浏览器是否支持指定的类型，并返回结果。如果返回空字符串则表示浏览器不支持此种功能
4.打开页面后，视频开始循环播放，当暂停时，在视频上方出现一个图片遮挡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.4.1</title>
<script>
var video;
var img;
function init()
{
video=document.getElementById("MyVideo");
video.style.position="absolute";
video.style.width="400px";
video.style.height="300px";
video.style.left="50px";
video.style.top="50px"; img=document.getElementById("MyImg");
img.style.position="absolute";
img.style.width="340px";
img.style.height="160px";
img.style.left="80px";
img.style.top="120px";
img.style.zIndex=2;
img.hidden=true;
}
function showImg(flag)
{
img.hidden=flag;
}
</script>
</head>
<body onLoad="init()">
<video id="MyVideo" loop autoplay src="movie.mp4" controls onPlay="showImg(true);" onPause="showImg(false);" ></video>
<img id="MyImg" src="MyImage.png" />
</body>
</html>
显示结果
HTML5视频播放的更多相关文章
- 打造自己的html5视频播放器
前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...
- html5 视频播放
html5 视频播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- HTML5视频播放插件 video.js介绍
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- html5视频播放器 二 （功能实现及播放优化）
样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...
- html5视频播放器 一 （改写默认样式）
一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...
- html5视频播放插件
对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...
- html5 视频播放插件
HTML5中加入了浏览器非常友好的标签 <video> ,这个标签非常的厉害,它可以不依靠falsh播放器,在网页中播放视频,目前W3C提供的video只支持mp4,ogg,webm三种视 ...
- html5视频播放解决方案
关键词:html5 nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘.近期通过学习和研究html5有点成果,特总结分享给大家.众所周知应用开发分两种:一是原生的 ...
随机推荐
- x01.Weiqi.7: 调整重绘
GitHub 谁方便谁拍,谁重要拍谁.在这个砖头满天飞的时代,一个好的生态显得尤为重要. 红颜小头发,要的很简单. 也许成绝唱,只因鱼断肠. 姚贝福娃的离去,除感叹人生无常外,活着做点有意义的事情, ...
- 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)
天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧) Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...
- <总结>delphi WebBrowser控件的使用中出现的bug
Delphi WebBrowser控件的使用中出现的bug: 1.WebBrowser.Visible=false:Visible属性不能使WebBrowser控件不可见,暂时用 WebBrowse ...
- 连载《一个程序猿的生命周期》- 44.感谢，我从事了IT相关的工作
感谢博客园一直以来的支持,写连载都是在这里首发,相比较CSDN和开源中国气氛要好的多. 节前,想以此篇文章结束<一个程序猿的生命周期>的<生存>篇,对过10的年做一个了断,准备 ...
- C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性
本来没打算单独写的,但是在自己弄测试小程序的时候,越写发现不清楚的东西越多,所以实践又一次证明:纸上得来终觉浅,绝知此事要躬行! 直接贴代码了: //发生顺序:KeyDown->KeyPress ...
- HTML ------ 关于表单 Form
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...
- BZOJ1001: [BeiJing2006]狼抓兔子 [最小割 | 对偶图+spfa]
1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 19528 Solved: 4818[Submit][ ...
- codeforces 711E. ZS and The Birthday Paradox 概率
已知一年365天找23个人有2个人在同一天生日的概率 > 50% 给出n,k ,表示现在一年有2^n天,找k个人,有2个人在同一天生日的概率,求出来的概率是a/b形式,化到最简形式,由于a,b可 ...
- iis 使用 LocalDB 报错：provider: SQL Network Interfaces, error: 50
在使用asp.net core读取localdb数据库时,报以下错误: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 S ...
- Windows phone应用开发[18]-下拉刷新
在windows phone 中采用数据列表时为了保证用户体验常遇到加载数据的问题.这个问题普遍到只要你用到数据列表就要早晚面对这个问题. 很多人会说这个问题已经有解决方案. 其实真正问题并不在于如何 ...