H5新特性：video与audio的使用
HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。
这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。
·首先带大家熟悉一下video标签的属性方法，根据属性方法做一个小demo，
HTML5支持的视频格式：Ogg- 带有
Theora视频编码+Vorbis音频编码的Ogg文件 - 支持的浏览器:
F、C、O
- 带有
MEPG4- 带有
H.264视频编码+AAC音频编码的MPEG4文件 - 支持的浏览器:
S、C
- 带有
WebM- 带有
VP8视频编码+Vorbis音频编码的WebM格式 - 支持的浏览器:
I、F、C、O - 劣势：视频少、转码器几乎没有，不好转码
- 带有
想要
video能自动填充慢父div的大小，只要给video标签加上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="" height="" 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>=&&vol<=){
video.volume=vol;
}else{
video.volume=(vol<)?:;
}
}
document.getElementById("volUp").addEventListener("click",function(){
setVol(.);
});
document.getElementById("volDown").addEventListener("click",function(){
setVol(-.);
});
/*减小速率加大速率*/ document.getElementById("slower").addEventListener("click",function(){
video.playbackRate-=.;
});
document.getElementById("faster").addEventListener("click",function(){
video.playbackRate+=.;
});
document.getElementById("normal").addEventListener("click",function(){
video.playbackRate=;
}); /*快进倒退复位*/
function setTime(a){
if(a==){
video.currentTime=a;
}else{
video.currentTime+=a;
}
}
document.getElementById("reset").addEventListener("click",function(){
setTime();
});
document.getElementById("fwd").addEventListener("click",function(){
setTime();
});
document.getElementById("bwd").addEventListener("click",function(){
setTime(-);
});
/*视频长度*/
video.addEventListener("loadedmetadata", function () {
vLength = video.duration.toFixed();
document.getElementById("vLength").textContent = vLength;
});
/*当前时间和持续时间*/
video.addEventListener("timeupdate", function () {
var currentTime= video.currentTime;
document.getElementById("curTime").textContent = currentTime.toFixed();
document.getElementById("vRemaining").textContent = (vLength - currentTime).toFixed();
});
</script>
</html>
H5新特性：video与audio的使用的更多相关文章
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- 使用h5新特性，轻松监听任何App自带返回键
1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
- 前端面试基础-html篇之H5新特性
h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Stor ...
随机推荐
- haproxy做TCP层的负载均衡
最新项目中发现,大量游戏玩家访问登录服务器时出现延迟,导致玩家无法登录,愿意可能是登录服务器性能达到极限. 所以目前想通过proxy的方式访问登录服务器集群,避免登录延迟. 1.下载haproxy最新 ...
- 编译geth报错的解决方法 make: *** [geth] 错误 1
在centos下安装了go1.9.1版本,编译go-ethereum时报错: [root@localhost go-ethereum]# make gethbuild/env.sh go run bu ...
- array_merge 优化调整
function dealed_array_merge($a,$b){ if ($a && !$b){ return $a; } if (!$a && $b){ ret ...
- Java基础-IO流对象之字节流（Stream）
Java基础-IO流对象之字节流(Stream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在前面我分享的笔记中,我们一直都是在操作文件或者文件夹,并没有给文件中写任何数据.现 ...
- Mongodb 笔记01 MongoDB 简介、MongoDB基础知识、启动和停止MongoDB
MongoDB 简介 1. 易于使用:没有固定的模式,根据需要添加和删除字段更加容易 2. 易于扩展:MongoDB的设计采用横向扩展.面向文档的数据模型使它能很容易的再多台服务器之间进行分割.自动处 ...
- 从咖啡馆的经营看 Web 应用的扩展
我经营着一家咖啡馆.经营成本同所用的资源成正比. 我的咖啡馆店面大概有一百平方英尺(约九平方米),雇佣了一个咖啡师,一台咖啡机. 营业能力: 每次能够服务一个顾客,用三分钟泡制一杯咖啡,算下来服务一个 ...
- 如何给自己的PHP项目制作安装程序
最近很是激动啊,现在的自己还是和当初刚刚学习程序的时候一样,虽然现在回头一看自己写过的程序,都非常的小孩子和漏洞百出,也没有太多的考虑效率和安全,但是还是每次写出了新的程序或系统,都是抱着一种马上拿着 ...
- js获取变量的值
<body> <?php echo "<script> var message = \"$message\";</script> ...
- 判断html是否含有图片
核心代码: $url="http://XXXXX/article/012.html"; $content=file_get_contents($url); //读取文章页面源代码 ...
- 天梯赛 L2-022. （数组模拟链表） 重排链表
题目链接 题目描述 给定一个单链表 L1→L2→...→Ln-1→Ln,请编写程序将链表重新排列为 Ln→L1→Ln-1→L2→....例如:给定L为1→2→3→4→5→6,则输出应该为6→1→5→2 ...