H5 video的使用
html5 video使用记录:
1.<video>的基本属性:
preload: (预加载)iPhone支持,Android不一定支持;
poster: (封面图片)iPhone支持,Android不一定支持;
autoplay: (自动播放)iPhone中的Safari不支持,webview可能被开启。Android不一定支持;
loop: (循环播放)iPhone支持,Android不一定支持;
controls: (控制条)iPhone支持,大师需要开始播放了才显示,Android基本支持;
width: (宽度);
height: (高度);
2.Media方法和属性:
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域,TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置,赋值可改变位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
Media.playbackRate = value;//当前播放速度,设置后马上改变
Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制
Media.controls; //是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
//TimeRanges(区域)对象:
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
2.video相应的事件:
在不同的监听中进行各种操作,随心所欲。
未完待续......
H5 video的使用的更多相关文章
- 【转】视频H5 video最佳实践
原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...
- H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- H5 video poster属性—设置视频封面
打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频. 若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢? 此时可使用H5 video提供的poster属性即 ...
- H5 video全屏与取消全屏兼容
H5 video全屏与取消全屏各浏览器兼容, requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...
- H5 video 标签 详解
昨天使用H5 video 标签 写了视频播放 本打算参考爱奇艺的代码进行修改 发现 它是动态数据 静态页面需要拆解代码 我情急之下 使用了 video 整理一下笔记 后面有人用 ...
- H5——video百花齐放(浏览器自带的播放器)
前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...
- H5 video标签视频加载存在的问题
客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...
- 视频H5のVideo标签在微信里的坑和技巧
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...
- H5 video踩坑实录
前段时间公司APP做了一个APP论坛会议,嵌入了h5播放器.我以为很简单,没想到,这正是我踩进泥潭的开始... (想要吸取经验的小伙伴可以慢慢往下看,想要解决方案的直接看最后!) 一.一开始我以为直接 ...
随机推荐
- MD5工具类,提供字符串MD5加密、文件MD5值获取(校验)功能
MD5工具类,提供字符串MD5加密(校验).文件MD5值获取(校验)功能 : package com.yzu.utils; import java.io.File; import java.io.Fi ...
- SQL Server基线算法(同比和环比)
基线介绍 基线为历史数据统计而成的数据,具有参考价值,并利用基线数据与当前值的对比,通过一定的报警机制,形成实时监控架构.SQL Server计数器采用同比和环比两种方式. 同比:可以计算未来一周的基 ...
- 关于JQ toggle 的注意事项
1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.
- 安装windows下的Cscope
http://blog.csdn.net/maxiee/article/details/10034263 Cscope 是一款用于查看大型工程中的代码的软件.它使用方便,支持快速查找 C Symbol ...
- final修饰符
final本身的含义是"最终的,不可变的",它可以修饰非抽象类,非抽象方法和变量.注意:构造方法不能使用final修饰,因为构造方法不能被继承,肯定是最终的. final修饰的类: ...
- 使用maven命令将jar包导入本地仓库
mvn install:install-file-DgroupId=包名-DartifactId=项目名-Dversion=版本号-Dpackaging=jar-Dfile=jar文件所在路径 1,本 ...
- BZOJ 1095: [ZJOI2007]Hide 捉迷藏
Description 一棵树,支持两个操作,修改一个点的颜色,问树上最远的两个白点距离. Sol 动态点分治. 动态点分治就是将每个重心连接起来,形成一个跟线段树类似的结构,当然它不是二叉的... ...
- nodejs 笔记
安装环境----------------------------------------------------------------1,安装nodejs 起步------------------- ...
- (二)Netty源码学习笔记之服务端启动
尊重原创,转载注明出处,原文地址:http://www.cnblogs.com/cishengchongyan/p/6129971.html 本文将不会对netty中每个点分类讲解,而是一个服务端启 ...
- IntelliJ IDEA WEB项目的部署配置
以下内容是我网上找的比较全面了,其中关于facets配置很多地方都没有说明,其实很重要,我加入了自己的理解.其他来自网络.在导入一个项目有问题时,建议先创建一个正确的web项目,然后对比配置项,一般就 ...