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. QEMU VCPU热插特性

    最近学习QEMU中VCPU热插特性,需要了解QEMU中VCPU热插的整个流程,VCPU热插是QEMU主板的一个feature. 1:这里先分析一下QEMU的主板模拟,主板在QEMU的设备模型中对应的是 ...

  2. ubuntu 12.04 sever下安装jre

    具体步骤如下: 首先打开http://www.java.com/en/download/linux_manual.jsp?locale=en 选择你想下载的版本,此处我选择的是jre-7u25-lin ...

  3. java开发问题总结-4-Maven使用问题汇总

    Non-resolvable parent POM [INFO] Scanning for projects... [ERROR] The build could not read 1 project ...

  4. VB中PictureBox控件使用教程

    PictureBox对象可以说是任何对象的原始型态,它可以加载图片.显示文字.画图外,它还能与Frame对象一样,在自己本身里头加载其它的对象而自成一个小群组,用PictureBox可以仿真出任何对象 ...

  5. .Net Framework认知

    在托管代码的世界里,应用程序首先被加载到应用程序域(AppDomain)中,然后将应用程序域加载到进程中,一个进程可以包含多个应用程序域,也就是说一个进程可以包含多个应用程序,毕竟应用程序域之间的切换 ...

  6. pic

  7. BZOJ2134——单选错位

    1.题意:这就是说考试的时候抄串了一位能对几个(雾) 2.分析:这是一个期望问题,期望就是平均,E(a+b)=E(a)+E(b),所以我们直接算出每个点能对几个就好,那么就是1/max(a[i],a[ ...

  8. Android控制ScrollView滚动

    有两种办法,第一种,使用scrollTo(),这个方法不需要handler,直接调用就行 第二种方式,使用fullScrol() 下面我们看一下这个函数: scrollView.fullScroll( ...

  9. Oracle的SQL语句中的变量替换

    一.问题描述 如下SQL: INSERT INTO tmp(val)VALUES('a&b'); 执行过程中会出现如下提示: 点击"确定"过后我们查看表中的数据: b后面的 ...

  10. html5 历史管理onhashchange和state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...