<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

========================

上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

======================================

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

=================================================

<video> 标签的属性

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

H5基础浏览器兼容性的更多相关文章

  1. html标签和css基础语法与浏览器兼容性等相关基础学习

    <!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...

  2. PC/H5端各浏览器兼容性问题及解决方案？

    概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况 ...

  3. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  5. 【web前端开发】浏览器兼容性处理

    1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...

  6. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  7. HTML`CSS_网站页面不同浏览器兼容性问题解决

    目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内 ...

  8. 浏览器兼容性-JS篇

    总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...

  9. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

随机推荐

  1. lua的通用print函数

    1.前言 最近在做关于openresty方面的工作,涉及到lua脚本语言,经常需要打日志查看内容.普通的print函数遇到nil或table时,非常无力.而项目中的代码经常遇到参数为nil或table ...

  2. 关于vue 框架与后台框架的混合使用的尝试------转载

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  3. OpenStack运维（一）：OpenStack项目和用户

    1.添加项目 keystone tenant-create --name=demo [--description tenant-description --enable false] demo:项目名 ...

  4. ubuntu 安装 pythonenv

    This will get you going with the latest version of pyenv and make it easy to fork and contribute any ...

  5. Volatile的作用

    众所周知,volatile关键字可以让线程的修改立刻通知其他的线程,从而达到数据一致的作用.那么它具体涉及到哪些内容呢? 关于缓存 计算机最大的存储空间就是磁盘(硬盘),但是访问的速度也是最慢的,价格 ...

  6. Java 并发编程：volatile的使用及其原理

    Java并发编程系列: Java 并发编程:核心理论 Java并发编程:Synchronized及其实现原理 Java并发编程:Synchronized底层优化(轻量级锁.偏向锁) Java 并发编程 ...

  7. java 数据格式验证类

    作为一个前端,懂一点java,php之类的,甚好. 我所在的项目前端采用的就是java的spring mvc框架,所以我们也写java,掐指一算,也快一年了. 前端而言,验证是一个坎,绕不过去的,前面 ...

  8. thinkphp->add方法错误

    $group_id=$model->add($add); 以上这句代码如果执行成功,返回它存储的id,但是,会有一种情况一直返回1. 代码完全没有问题,检查数据库发现有两个主键id,删除一个就O ...

  9. ArcGis连接oracle失败：ORA-6413：连接未打开

    问题: 通过ARCMap 添加Oracle数据库连接时提示,ORA-6413:连接未打开. 运行环境: ArcGis 10.2 Oracle 10g 解决方法: 通过上网查找解决方法,网友说" ...

  10. Python 字典中一键对应多个值

    #字典的一键多值 print'方案一 list作为dict的值 值允许重复' d1={} key=1 value=2 d1.setdefault(key,[]).append(value) value ...