html5 与视频
1.视频支持格式。
有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm.
Theora+Vorbis=.ogg (Theora:视频编码器,Vorbis:音频编码器)
H.264+$$$=.mp4 (H.264:高清视频标准)
VP8+Vorbis=.webm(webm是新的开源视频标准,基于VP8编码器)
平台 | .ogg | .mp4 | .webm |
Andorid | ❌ | ❌ | |
FirFox | ❌ | ❌ | |
Chrome | ❌ | ❌ | |
iPhone | ❌ | ||
IE9 | ❌ | ||
Opera | ❌ | ❌ | |
Safari | ❌ |
可见,没有任何一个格式能够支持所有浏览器,所以我们需要引入3中格式的视频。
<video id="ivideo" width="320" height="640"> <source src="test.webm" type='video/webm;codecs="vp8,vorbis"'> <source src="test.mp4" type='video/mp4;codecs="arc1.42E01E,mp4a.40.a"'> <source src="test.ogg" type='video/ogg;codecs="thera,vorbis"'> </video>
2.video属性
autoplay:true or false;是否自动播放
loop:true or false;是否循环播放
volume:0~1数字;播放音量
poster:加载视频时显示的图片url。
duration:视频长度(s)
currentTime:视频当前播放时间(s)
ended:根据视频是否播放结束,返回true or false,
muted:查询播放中的视频是否静音,返回true or false
paused:查询视频当前是否被暂停,返回true or false
方法:
play():启动播放
pause():暂停
3.预加载视频
为视频加载添加预加载动画
<div id="preload">0%</div>
这里要知道两个htmlvideo元素的事件:
progress:在视频对象更新加载进度时触发该事件,用于更新进度文字
canplaythrough:在视频已加载足够播放全部视频数据时触发,用于确定什么时候播放视频。
load事件firefox不支持,chrome&ie10不触发progress事件
监听加载百分比函数:
function progress(){
var loadingStatus=document.getElementById("loadingstatus");
var videoEle=document.getElementById("ivideo");
var percent=parseInt((videoEle.buffered.end(0)/videoEle.duration)/100);
loadingStatus.innerHtml=percent+'%';
}
4.js判断浏览器可用视频格式
video的另一个方法:canPlayType(),返回一个文本字符串:maybe,probably,''
function supportVideoType(video){ var returnType=""; if(video.canPlayType("video/webm")=="probably"||video.canPlayType("video/webm")=="maybe"){ returnType="webm"; }else if(video.canPlayType("video/mp4")=="probably"||video.canPlayType("video/mp4")=="maybe"){ returnType="mp4"; }else if(video.canPlayType("video/ogg")=="probably"||video.canPlayType("video/ogg")=="maybe"){ returnType="ogg"; } return returnType;
使用标签方式引入video只能支持播放、暂停等功能,如果需要旋转、添加文字等特殊效果,则需要和canvas一起使用。
html5 与视频的更多相关文章
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- 不完全解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)
首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...
- Android WebView 总结 —— 使用HTML5播放视频及全屏方案
在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- 尚硅谷《全套Java、Android、HTML5前端视频》
尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...
- HTML5中音频视频标签使用
HTML5中音频视频标签使用的最好方式 Html5中提供了<audio> <vedio>元素实现音频视频的引入播放 然而更好的方式
- html5音频视频专题
html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
随机推荐
- ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- Cassandra简介
在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...
- 【调侃】IOC前世今生
前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...
- Linux中进行单文件内容的复制
文件内容复制的常规方法: 开辟一段空间,不断读取文件的内容并写入另一文件当中,这种方法好在安全,一般在类型允许的最大范围内是安全的,缺点就是复制内容的时间长 一次性复制文件的内容,这种方法必须首先获取 ...
- Linux学习之文件操作
Linux,一起学习进步- mkdir The mkdir command is used to create directories.It works like this: mkdir命令是用 ...
- python通过protobuf实现rpc
由于项目组现在用的rpc是基于google protobuf rpc协议实现的,所以花了点时间了解下protobuf rpc.rpc对于做分布式系统的人来说肯定不陌生,对于rpc不了解的童鞋可以自行g ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- RabbitMq应用一的补充(RabbitMQ的应用场景)
直接进入正题. 一.异步处理 场景:发送手机验证码,邮件 传统古老处理方式如下图 这个流程,全部在主线程完成,注册->入库->发送邮件->发送短信,由于都在主线程,所以要等待每一步完 ...
- 原生javascript 固定表头原理与源码
我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫 "freeze- ...
- addTwoNumbers
大神的代码好短,自己写的120多行=_= 各种判断 ListNode *f(ListNode *l1, ListNode *l2) { ListNode *p1 = l1; ListNode *p2 ...