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标签兼容性与自定义控件相关推荐

  1. HTML5 video标签的播放控制

    转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...

  2. html5 video 定位播放,HTML5 video标签的播放控制

    这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签v ...

  3. 如何使用html5的video标签,关于html5 video标签的使用方法

    关于html5 video标签的使用方法 发布时间:2020-07-23 16:39:31 来源:亿速云 阅读:92 作者:清晨 小编给大家分享一下关于html5 video标签的使用方法,希望大家阅 ...

  4. html标签video资源占用,使用HTML5 video标签的一系列问题

    原标题:使用HTML5 video标签的一系列问题 H5标签的video,我想写过前端代码的人,都不会陌生吧.但video标签还是有一些问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8 ...

  5. 使用html5 video标签不自动播放视频问题(静音播放)

    谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...

  6. html video标签问题,用HTML5 video标签的一系列问题

    H5标签的video,我想写过前台代码的人,都不会陌生吧.但video标签还是有少量问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8以下的浏览器:处理办法:用js的库video.js, ...

  7. html5视频播放器脚本怎么用,HTML5 video标签(播放器)学习笔记(一):使用入门...

    近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做的哪些工作. 网上的教程其实也不少了 w3cschool里面的 ...

  8. HTML5 VIDEO标签播放事件流水

    HTML5 的 <video>标签有许多默认的事件,如果我们通过这个播放器加载一段视频文件,从开始加载到播放结束,都经历了哪些事件呢?这些事件的触发顺序如何? [1]HTML5:onpla ...

  9. html5视频播放器隐藏控制,HTML5 video标签(播放器)学习笔记(二):播放控制

    上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括 ...

最新文章

  1. 构造 ---- 最小没出现过的数(逆向构造) D. Replace by MEX
  2. [转载]读塔莎奶奶的美好生活
  3. hdu 2602 Bone Collector(01背包)
  4. .NET5在开发平台上远优于Java,如何发挥优势?
  5. 2021“MINIEYE杯”中国大学生算法设计超级联赛(10)Pty loves string(Border+二维数点)
  6. mysql g月份分组_PowerBI快捷键——视觉对象分组功能
  7. python实现自动工作_python实现串口自动触发工作的示例
  8. Nginx解决403 forbidden
  9. 天梯— A-B(C语言)
  10. scipy.misc 介绍
  11. 【SpringMVC学习02】走进SpringMVC的世界
  12. 利用keras训练自己的图片数据集
  13. 蓝桥杯官网练习系统基础练习(八)
  14. TCP/IP协议五:HTTP协议详解
  15. 计算机无法安装hp网络打印机,hp打印机驱动安装失败怎么办 hp打印机驱动安装失败的解决办法...
  16. 立体栅格地图_基于滑动窗口的室内三维立体栅格地图特征点提取方法与流程
  17. iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码
  18. 利用计算机网络技术全面规划供应链中的,供应链是围绕核心企业,通过对商流、信息流、物流、资金流的控制,从采购原材料开始,制成中间产品以 - 试题答案网问答...
  19. 苹果笔记本开机问号白色问号?
  20. Installshield 安装包安装过程中遇到的报错(一)

热门文章

  1. vb.net中递归退到最外层_面试题被问到再也不慌,深究JavaScript中的深拷贝与浅拷贝...
  2. 小型机oracle命令,IBM 小型机基本知识及AIX操作系统基本命令.doc
  3. Helm 3 完整教程(六):在模板中使用 Helm 函数
  4. android togglebutton 自定义,自定义控件之-----ToggleButton
  5. idea 高级调试技巧
  6. jsp文件过大,is exceeding 65535 bytes limit
  7. 工具箱锁打不开了怎么办_锁芯坏了门打不开怎么办?锁芯拆开的方法是什么?...
  8. VS2019,C#修改WinForm应用程序和窗体图标
  9. 哪个相机可以拍gif动图_你见过最搞笑的gif是什么?那些搞笑的动图都是用什么gif制作app制作的?...
  10. linux 汇编 读取软盘,读取软盘逻辑扇区的汇编实现代码