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的使用的更多相关文章

  1. 【转】视频H5 video最佳实践

    原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...

  2. H5 video自定义视频控件

    1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. H5 video poster属性—设置视频封面

     打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频.   若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢?   此时可使用H5 video提供的poster属性即 ...

  4. H5 video全屏与取消全屏兼容

    H5 video全屏与取消全屏各浏览器兼容,  requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...

  5. H5 video 标签 详解

    昨天使用H5  video 标签 写了视频播放   本打算参考爱奇艺的代码进行修改  发现 它是动态数据  静态页面需要拆解代码 我情急之下  使用了  video   整理一下笔记   后面有人用 ...

  6. H5——video百花齐放(浏览器自带的播放器)

    前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...

  7. H5 video标签视频加载存在的问题

    客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...

  8. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  9. H5 video踩坑实录

    前段时间公司APP做了一个APP论坛会议,嵌入了h5播放器.我以为很简单,没想到,这正是我踩进泥潭的开始... (想要吸取经验的小伙伴可以慢慢往下看,想要解决方案的直接看最后!) 一.一开始我以为直接 ...

随机推荐

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. unixLike命令拾遗

    针对在日常工作过程中,发现的学习的漏洞和忘记的知识,进行拾遗. 编辑命令 一.vim操作 1.进入编辑模式 在光标移到将要编辑处,点击i,进入编辑模式 2.退出编辑模式 按esc或者crtl+c退出编 ...

  3. frame和bounds

    - frame 是一个以**父视图**为坐标系的位置- bounds 是一个以**自身**为坐标系的位置- 如果改变了bounds 那么会影响子控件的显示位置

  4. 08-linux 其他知识

    linux其他知识点 1-防火墙- iptables原理 2- 本部分属于一步一步学习大数据系列之 Linux 的章节,欢迎订阅更多文章 更多内容请参考:一步一步学习大数据系列介绍

  5. 解决eclipse编辑js和html卡的问题

    window -> Preference -> General -> Editors -> Text Editors -> HyperLinking ->  取消勾 ...

  6. 数据库阿里连接池 druid配置详解

    http://blog.csdn.net/hj7jay/article/details/51686418 http://lj6684.iteye.com/blog/1770093 http://www ...

  7. Linux下查看磁盘与目录的容量——df、du

    df:列出文件系统的整体磁盘使用量: du:评估文件系统的磁盘使用量(常用于评估目录所占容量) df参数: -a:列出所有的文件系统,包括系统特有的/proc等文件系统 -k:以KB的容量显示各文件系 ...

  8. MySQL详解--锁

    http://blog.csdn.net/xifeijian/article/details/20313977 2014-03-06 23:45 66484人阅读 评论(17) 收藏 举报  分类: ...

  9. JQ倒计时天时分秒

    <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w& ...

  10. 用友U8 归纳采购退货结算三种情况

    对应版本: 8.52 问题现象: 客户经常处理退货结算的问题 问题原因: 应系统掌握各种情况 解决方案: 结算前全额退货即已录入采购入库单,但未进行采购结算,并且全额退货.填制一张全额数量的红字采购入 ...