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相应的事件:

  

  在不同的监听中进行各种操作,随心所欲。

  未完待续......

转载于:https://www.cnblogs.com/xinxingyu/p/5868913.html

H5 video的使用相关推荐

  1. H5 video 开发问题及相关知识点

    相关链接: H5 video 的使用 H5 video 全屏播放 ♢ video点播与直播  H5 video目前所有浏览器都支持的视频格式是MP4格式,所以mp4应当是点播web视频的首选格式. 而 ...

  2. h5 video全屏播放

    相关链接: H5 video 的使用 H5 video开发问题及相关知识点 由于全屏播放在移动web上的兼容问题,尤其是在iOS上,让全屏本应该比较简单的操作,根据业务的需求,有时候会有些复杂.这里查 ...

  3. 微信公众号网页 H5 video 标签自动播放

    目录 微信公众号网页 H5 video 标签自动播放 问题描述 解决方案 微信公众号网页 H5 video 标签自动播放 环境:微信公众号网页 需求:H5 video 标签自动播放视频 video 标 ...

  4. vue中使用h5 video标签实现弹窗播放本地视频

    参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...

  5. 视频H5 video最佳实践

    视频H5 video最佳实践 video的属性 <video   id="video"    src="video.mp4"    controls = ...

  6. 直播源码搭建教程之在h5 video中的直播

    直播源码搭建教程之在h5 video中的直播 直播越来越成为趋势,因为疫情的冲击,不管是直播带货还是直播教育等等,将线上模式推上了巅峰- 因为业务和兴趣关系,稍微研究了一下在H5中直播的相关知识. P ...

  7. H5 video标签封面

    H5 video标签封面 使用视频的第一帧作为video标签的封面 <video src="地址" poster="地址+ '?x-oss-process=vide ...

  8. h5 video播放器遇到的坑

    h5 video播放器遇到的坑 1.在安卓webview中默认全屏播放解决方法 此属性需要在播放前设置好,播放之后设置可能会无效 如果使用video播放音频文件的话,安卓会出现黑屏并且无法播放的状况, ...

  9. 多媒体web播放器,移动端h5 video播放器

    由于项目需要用到h5的video标签,但是video标签在移动端会有一些坑,安卓和iOS的兼容性问题,不同浏览器间的表现差异,小问题还是挺多的.so,借用一款第三方的h5 video web播放器还是 ...

  10. h5 video视频播放的同时加水印,图片加水印同样的原理

    经常能看到播放视频的网站上加水印的效果,记录下成果以备后续看: 效果图如下: h5页面视频播放的同时加水印,有以下3种方法可尝试: 在原视频上添加,由于每次登陆的用户不一样,需要根据用户名动态确定水印 ...

最新文章

  1. 周志华《机器学习》课后习题解析(第四章):决策树
  2. 计算机网络-思维导图(4)网络层
  3. js的基本类型有哪些?引用类型有哪些?(二)------null和undefined的区别
  4. 两端对齐几种实现方案
  5. matlab改进 otsu法,otsu算法---matlab实现,和一种改进算法
  6. python Tk()、Frame()、TopLevel()用法
  7. sourcesafe的七个问题?
  8. oracle 按汉字拼音顺序排序
  9. MongoDB day03
  10. [codeforces 1359A] Berland Poker 抽屉原理
  11. python使用smtplib群发工资条的两种方式(及群发只成功一条的问题)
  12. 分享一些个人觉得非常好用的软件吧
  13. 拼多多给羊毛党发年终奖背后的那些事
  14. 阿里P8架构师谈(1):双11秒杀系统如何设计
  15. CSDN博客里面挂广告的推荐方法
  16. 复工复产调研实践报告
  17. 计算机专业英语词语缩略,计算机专业英语缩略词.doc
  18. 中国再生聚丙烯PP市场预测与投资战略报告(2022版)
  19. 渗流模型的实现与解读
  20. sun.security.validator.ValidatorException

热门文章

  1. 微信小程序云开发教程-小程序在云开发下的运作模式
  2. mysql得花多少钱,php-我需要帮助来解决为什么mySQL查询花费比...
  3. al32utf8的日期格式_五分钟学会Oracle数据库字符集
  4. 2021最新基于uniapp的计算机考研助手小程序(含管理端)
  5. lambda表达式总结
  6. java多线程-线程池
  7. 动画效果之时间轴对象构造器(即逐个执行动画)
  8. LayaAir 获取对象边界 getBounds/ getGraphicBounds
  9. 幂次方计算_收藏!机考计算器用法汇总,算题速度提高几倍
  10. 17、生命周期-BeanPostProcessor在Spring底层的使用