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相应的事件:
在不同的监听中进行各种操作,随心所欲。
未完待续......
转载于:https://www.cnblogs.com/xinxingyu/p/5868913.html
H5 video的使用相关推荐
- H5 video 开发问题及相关知识点
相关链接: H5 video 的使用 H5 video 全屏播放 ♢ video点播与直播 H5 video目前所有浏览器都支持的视频格式是MP4格式,所以mp4应当是点播web视频的首选格式. 而 ...
- h5 video全屏播放
相关链接: H5 video 的使用 H5 video开发问题及相关知识点 由于全屏播放在移动web上的兼容问题,尤其是在iOS上,让全屏本应该比较简单的操作,根据业务的需求,有时候会有些复杂.这里查 ...
- 微信公众号网页 H5 video 标签自动播放
目录 微信公众号网页 H5 video 标签自动播放 问题描述 解决方案 微信公众号网页 H5 video 标签自动播放 环境:微信公众号网页 需求:H5 video 标签自动播放视频 video 标 ...
- vue中使用h5 video标签实现弹窗播放本地视频
参考h5 < video >标签的用法 在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭 父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...
- 视频H5 video最佳实践
视频H5 video最佳实践 video的属性 <video id="video" src="video.mp4" controls = ...
- 直播源码搭建教程之在h5 video中的直播
直播源码搭建教程之在h5 video中的直播 直播越来越成为趋势,因为疫情的冲击,不管是直播带货还是直播教育等等,将线上模式推上了巅峰- 因为业务和兴趣关系,稍微研究了一下在H5中直播的相关知识. P ...
- H5 video标签封面
H5 video标签封面 使用视频的第一帧作为video标签的封面 <video src="地址" poster="地址+ '?x-oss-process=vide ...
- h5 video播放器遇到的坑
h5 video播放器遇到的坑 1.在安卓webview中默认全屏播放解决方法 此属性需要在播放前设置好,播放之后设置可能会无效 如果使用video播放音频文件的话,安卓会出现黑屏并且无法播放的状况, ...
- 多媒体web播放器,移动端h5 video播放器
由于项目需要用到h5的video标签,但是video标签在移动端会有一些坑,安卓和iOS的兼容性问题,不同浏览器间的表现差异,小问题还是挺多的.so,借用一款第三方的h5 video web播放器还是 ...
- h5 video视频播放的同时加水印,图片加水印同样的原理
经常能看到播放视频的网站上加水印的效果,记录下成果以备后续看: 效果图如下: h5页面视频播放的同时加水印,有以下3种方法可尝试: 在原视频上添加,由于每次登陆的用户不一样,需要根据用户名动态确定水印 ...
最新文章
- 周志华《机器学习》课后习题解析(第四章):决策树
- 计算机网络-思维导图(4)网络层
- js的基本类型有哪些?引用类型有哪些?(二)------null和undefined的区别
- 两端对齐几种实现方案
- matlab改进 otsu法,otsu算法---matlab实现,和一种改进算法
- python Tk()、Frame()、TopLevel()用法
- sourcesafe的七个问题?
- oracle 按汉字拼音顺序排序
- MongoDB day03
- [codeforces 1359A] Berland Poker 抽屉原理
- python使用smtplib群发工资条的两种方式(及群发只成功一条的问题)
- 分享一些个人觉得非常好用的软件吧
- 拼多多给羊毛党发年终奖背后的那些事
- 阿里P8架构师谈(1):双11秒杀系统如何设计
- CSDN博客里面挂广告的推荐方法
- 复工复产调研实践报告
- 计算机专业英语词语缩略,计算机专业英语缩略词.doc
- 中国再生聚丙烯PP市场预测与投资战略报告(2022版)
- 渗流模型的实现与解读
- sun.security.validator.ValidatorException
热门文章
- 微信小程序云开发教程-小程序在云开发下的运作模式
- mysql得花多少钱,php-我需要帮助来解决为什么mySQL查询花费比...
- al32utf8的日期格式_五分钟学会Oracle数据库字符集
- 2021最新基于uniapp的计算机考研助手小程序(含管理端)
- lambda表达式总结
- java多线程-线程池
- 动画效果之时间轴对象构造器(即逐个执行动画)
- LayaAir 获取对象边界 getBounds/ getGraphicBounds
- 幂次方计算_收藏!机考计算器用法汇总,算题速度提高几倍
- 17、生命周期-BeanPostProcessor在Spring底层的使用