html5 video标签兼容性与自定义控件
Video不兼容IE8及之前的版本和opera mini。
格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放、免费的格式。对于IE8及以下版本可以嵌入<embed>标签。
以下为代码:
1 <video controls="controls" poster="mei.png"> 2 <!-- MP4格式不兼容Firefox 20以下和opera 24以下 Safari3.1以下--> 3 <!-- 部分兼容FF34-21 安卓浏览器4.3以下 安卓ff44 UC9.9 --> 4 5 <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4"> 6 <!-- <source src="video/langyabang_18.mp4" type="video/mp4"> --> 7 <!-- ogg格式兼容Firefox 20以下和opera 24以下 安卓ff44 UC9.9--> 8 <!-- 不兼容FF 2~3 Opera10.1 --> 9 <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type="video/ogg"> 10 <!-- <object data="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4"> --> 11 <!-- ie7/8有object会打开WindowsMediaPlayer --> 12 <!-- ie7/8只有embed会正常播放 --> 13 <!-- <img src="data:images/mei.png"> --> 14 <embed src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" pluginspage="http://www.macromedia.com/go/getflashplayer"/> 15 <!-- </object> --> 16 </video>
推荐我用的视频格式转换工具,可以直接转换出需要的这三种格式:freemake video converter
常用的一些属性与方法:
videoElement.volumn 设置或返回音量,为0~1间的数字;
videoElement.currentTime 设置或返回当前进度,为秒数;
videoElement.duration 返回视频长度,为秒数;
videoElement.paused 返回当前是否暂停;
videoElement.play() 开始播放;
videoElement.pause() 暂停播放;
有关全屏:
Full screen API:可以让一个元素全屏,例如video或canvas。
支持的情况并不很好,具体见http://caniuse.com/#search=full%20screen
对于不支持的我的做法是,放大当前元素占满浏览器窗口。
测试情况:
Windows7下:
Safari不能放,不是很懂。。。
在其他浏览器中都正常;
IE10之前我都是让它充满整个浏览器窗口。
在米4中:
(所有浏览器都是最新)
实际测试时在UC中video会替换掉我的自定义控件,UC的控件可以全屏;
小米自带浏览器会直接全屏,用的好像是内置的播放器;
火狐是正常的;
微信和UC一样;
qq和小米自带浏览器差不多,都自动全屏并且用浏览器的控件,不过全屏下播放界面不一样。
写了一个很粗糙的播放器,在电脑端还可以接受,放到手机上实在不方便,我接着改。。。
具体见:
http:\\zhangqiong.github.io\myplugins\video.html
不好意思发现之前用的线上视频不能访问了
参考文档:
全屏https://developer.mozilla.org/zh-CN/docs/DOM/Using_fullscreen_mode
使用 HTML5 音频和视频 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
Media buffering, seeking, and time ranges https://developer.mozilla.org/zh-CN/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges
当音频/视频处于加载过程中时,会依次发生以下事件:http://www.w3school.com.cn/tags/av_event_durationchange.asp
转载于:https://www.cnblogs.com/zqiong/p/5265994.html
html5 video标签兼容性与自定义控件相关推荐
- HTML5 video标签的播放控制
转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...
- html5 video 定位播放,HTML5 video标签的播放控制
这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签v ...
- 如何使用html5的video标签,关于html5 video标签的使用方法
关于html5 video标签的使用方法 发布时间:2020-07-23 16:39:31 来源:亿速云 阅读:92 作者:清晨 小编给大家分享一下关于html5 video标签的使用方法,希望大家阅 ...
- html标签video资源占用,使用HTML5 video标签的一系列问题
原标题:使用HTML5 video标签的一系列问题 H5标签的video,我想写过前端代码的人,都不会陌生吧.但video标签还是有一些问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8 ...
- 使用html5 video标签不自动播放视频问题(静音播放)
谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...
- html video标签问题,用HTML5 video标签的一系列问题
H5标签的video,我想写过前台代码的人,都不会陌生吧.但video标签还是有少量问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8以下的浏览器:处理办法:用js的库video.js, ...
- html5视频播放器脚本怎么用,HTML5 video标签(播放器)学习笔记(一):使用入门...
近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做的哪些工作. 网上的教程其实也不少了 w3cschool里面的 ...
- HTML5 VIDEO标签播放事件流水
HTML5 的 <video>标签有许多默认的事件,如果我们通过这个播放器加载一段视频文件,从开始加载到播放结束,都经历了哪些事件呢?这些事件的触发顺序如何? [1]HTML5:onpla ...
- html5视频播放器隐藏控制,HTML5 video标签(播放器)学习笔记(二):播放控制
上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括 ...
最新文章
- 构造 ---- 最小没出现过的数(逆向构造) D. Replace by MEX
- [转载]读塔莎奶奶的美好生活
- hdu 2602 Bone Collector(01背包)
- .NET5在开发平台上远优于Java,如何发挥优势?
- 2021“MINIEYE杯”中国大学生算法设计超级联赛(10)Pty loves string(Border+二维数点)
- mysql g月份分组_PowerBI快捷键——视觉对象分组功能
- python实现自动工作_python实现串口自动触发工作的示例
- Nginx解决403 forbidden
- 天梯— A-B(C语言)
- scipy.misc 介绍
- 【SpringMVC学习02】走进SpringMVC的世界
- 利用keras训练自己的图片数据集
- 蓝桥杯官网练习系统基础练习(八)
- TCP/IP协议五:HTTP协议详解
- 计算机无法安装hp网络打印机,hp打印机驱动安装失败怎么办 hp打印机驱动安装失败的解决办法...
- 立体栅格地图_基于滑动窗口的室内三维立体栅格地图特征点提取方法与流程
- iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码
- 利用计算机网络技术全面规划供应链中的,供应链是围绕核心企业,通过对商流、信息流、物流、资金流的控制,从采购原材料开始,制成中间产品以 - 试题答案网问答...
- 苹果笔记本开机问号白色问号?
- Installshield 安装包安装过程中遇到的报错(一)
热门文章
- vb.net中递归退到最外层_面试题被问到再也不慌,深究JavaScript中的深拷贝与浅拷贝...
- 小型机oracle命令,IBM 小型机基本知识及AIX操作系统基本命令.doc
- Helm 3 完整教程(六):在模板中使用 Helm 函数
- android togglebutton 自定义,自定义控件之-----ToggleButton
- idea 高级调试技巧
- jsp文件过大,is exceeding 65535 bytes limit
- 工具箱锁打不开了怎么办_锁芯坏了门打不开怎么办?锁芯拆开的方法是什么?...
- VS2019,C#修改WinForm应用程序和窗体图标
- 哪个相机可以拍gif动图_你见过最搞笑的gif是什么?那些搞笑的动图都是用什么gif制作app制作的?...
- linux 汇编 读取软盘,读取软盘逻辑扇区的汇编实现代码