h5中的video与audio
·首先带大家熟悉一下video标签的属性方法，根据属性方法做一个小demo，
HTML5支持的视频格式：Ogg- 带有
Theora视频编码+Ogg文件 - 支持的浏览器:
F、O
- 带有
MEPG4- 带有
H.264视频编码+MPEG4文件 - 支持的浏览器:
S、WebM- 带有
VP8视频编码+WebM格式 - 支持的浏览器:
I、C、想要video能自动填充慢父div的大小，只要给style="width= 100%; height=100%; object-fit: fill"即可
video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video> - 带有
给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频<video controls = “controls”> <source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4” <source src = “2.ogg” type=”video/ogg” /> //ogg格式 <source src=”3.webm” type=”video/webm” /> //webm格式 </video>controls 是否显示播放控件
autoplay 是否打开浏览器后自动播放
width 设置播放器的宽度
height 设置播放器的高度
loop 设置视频是否循环播放
preload 设置是否等加载完再播放
src url 设置要播放视频的url地址
poster imgurl 设置播放器初始默认显示图片canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
play() 开始播放音频/视频。
pause() 暂停当前播放的音频/视频。playbackRate 设置或返回音频/视频播放的速度。
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）。
duration 返回当前音频/视频的长度（以秒计）。
loadedmetadata：当指定的音频/视频的元数据已加载时，会发生 loadedmetadata事件。
timeupdate: 时间改变时触发muted 设置或返回音频/视频是否静音。
volume 设置或返回音频/视频的音量- 带有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> 视频地址：<input type="text" id="videoUrl" value="http://115.231.144.52/12/v/w/m/y/vwmypxnxothnduooudlozlddkekrrs/hc.yinyuetai.com/E771014D8879E8AA0ED2CBC807F1C2CE.flv?sc=f1cc344f8e1ff11a"/>
<button onclick="getVideo()">load</button><br />
<video id="video" width="500" height="400" controls autoplay loop preload poster="img/1.jpg"></video><br /> <button onclick="play()">播放/暂停</button>
<button id="mute">静音</button>
<button id="volUp">++</button>
<button id="volDown">--</button>
<button id="slower">减慢速率</button>
<button id="normal">恢复速率</button>
<button id="faster">加快速率</button>
<br />
<button id="reset" >复位</button>
<button id="bwd" > <<倒退 </button>
<button id="fwd" >快进>></button>
<br /> 视频长度: <span id="vLength"></span> <br />
当前时间: <span id="curTime" ></span><br />
持续时间: <span id="vRemaining" ></span> </body>
<script type="text/javascript">
/*加载视频*/
var video=document.getElementById("video");
function getVideo(){
var videoUrl=document.getElementById("videoUrl").value;
if(videoUrl!=""){
video.src=videoUrl;
video.load();
}
}
/*播放*/
if(video.canPlayType){
function play(){
if(video.paused){
video.play();
}else{
video.pause();
}
}
}
/*静音*/
document.getElementById("mute").addEventListener("click",function(){
if(video.muted){
video.muted=false;
}else{
video.muted=true;
}
}); /*音量*/
function setVol(value){
var vol=video.volume;
vol+=value;
if(vol>=0&&vol<=1){
video.volume=vol;
}else{
video.volume=(vol<0)?0:1;
}
}
document.getElementById("volUp").addEventListener("click",function(){
setVol(.1);
});
document.getElementById("volDown").addEventListener("click",function(){
setVol(-.1);
});
/*减小速率加大速率*/ document.getElementById("slower").addEventListener("click",function(){
video.playbackRate-=.25;
});
document.getElementById("faster").addEventListener("click",function(){
video.playbackRate+=.25;
});
document.getElementById("normal").addEventListener("click",function(){
video.playbackRate=1;
}); /*快进倒退复位*/
function setTime(a){
if(a==0){
video.currentTime=a;
}else{
video.currentTime+=a;
}
}
document.getElementById("reset").addEventListener("click",function(){
setTime(0);
});
document.getElementById("fwd").addEventListener("click",function(){
setTime(10);
});
document.getElementById("bwd").addEventListener("click",function(){
setTime(-10);
});
/*视频长度*/
video.addEventListener("loadedmetadata", function () {
vLength = video.duration.toFixed(1);
document.getElementById("vLength").textContent = vLength;
});
/*当前时间和持续时间*/
video.addEventListener("timeupdate", function () {
var currentTime= video.currentTime;
document.getElementById("curTime").textContent = currentTime.toFixed(1);
document.getElementById("vRemaining").textContent = (vLength - currentTime).toFixed(1);
});
</script>
</html>
h5中的video与audio的更多相关文章
- 在ios中微信video和audio无法自动播放解决方案
WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- h5中的audio音频标签与对应的dom对象
HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...
- <video>和<audio>标签，对视频和音频的支持
H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...
- ffmpeg 频中分离 video audio 截取片断
1.获取视频的信息 ffmpeg -i video.avi 2,将图片序列分解合成视频 ffmpeg -i src.mpg image%d.jpg ffmpeg -f image2 -i ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
- 范仁义html+css课程---9、video、audio、canvas和svg元素略讲
范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...
- swift禁用webView对H5中数字，链接，日期，地址，电话号码做解析
showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...
随机推荐
- HDU 5445——Food Problem——————【多重背包】
Food Problem Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)To ...
- RPC框架设计思路
RPC是指远程过程调用 1.要解决通讯的问题,主要是通过在客户端和服务器之间建立TCP连接,远程过程调用的所有交换的数据都在这个连接里传输.连接可以是按需连接,调用结束后就断掉,也可以是长连接,多个远 ...
- css中 repeat-x 的简单用法
问repeat-x 00 中: 0 0 是 什么意思,如果改为0 -50呢,不写话默认是什么(不写话和0 0 的效果不一样)- ------<html><head><s ...
- 消息中间件之MQ详解及四大MQ比较
一.消息中间件相关知识 1.概述 消息队列已经逐渐成为企业IT系统内部通信的核心手段.它具有低耦合.可靠投递.广播.流量控制.最终一致性等一系列功能,成为异步RPC的主要手段之一.当今市面上有很多主流 ...
- python之其他模块的用法
1.时间模块 在Python中通常有三种表示时间的方式,分别是时间戳.元组.格式化的时间字符串. 时间模块的常用方法 time.sleep() #指定延迟时间 time.time() #当前时间的 ...
- JavaScript中函数声明和函数表达式的区别
声明一个函数: var x=1; foo(); function foo() { console.log(x);//1 } myfun();//报错 定义一个函数表达式: var myfun=myfo ...
- eaysui 子页面刷新父页面datagrid
近期碰到这样一个问题,子页面操作后需要刷新父页面datagrid元素,刚开始用这种方式刷新,$("#talbe",window.parent.document).datagrid( ...
- 树莓派-（一）开箱到点亮一些坑(无屏、无wlan、无直连键鼠)
0x00.前期准备: 材料: 树莓派3b+ 板子 * 1,适配电源 * 1,网线 * 2,sd卡16G * 1,读卡器 * 1 安装时注意,3b+三个散热片贴好.小风扇接线要接对 工具: 0x01. ...
- 【MFC】获取文件大小的方法
[转载]原文地址:http://blog.csdn.net/coderwu/article/details/5652056 MFC 下可以通过 CFileStatus 获取文件大小. ULONGLON ...
- DB2数据库备份还原
恢复及备份NC DB2数据库步 一. 安装DB2数据库 解压db2v9.5ins.rar安装,在写此文档时客户一般用的是9.5: 注意不要将db2安装到系统盘: 二. Windows版本 1.数据库备 ...