H5基础浏览器兼容性

<!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 设置视频播放器的宽度。
时间: 2024-08-09 19:54:40

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

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

<!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"> <table border="1px" cellspacing="0px"><!--cellspacing单元格间隙--> <thead></thead><tbody> <col span=&qu

浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试

当前主浏览器的核心是什么? 1) Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7.Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon.TheWorld .TT.GreenBrowser.AvantBrowser等). 2) Geckos: Netcape6开始采用的内核,后来的FF也采用了该内核,Geckos的特点是

浏览器兼容性之无序列表dl

浏览器兼容性之无序列表dl 无序列表的一些特定的css属性有list-style-type,list-style-position,和list-style-image.这些属性设置了列表项目符号的类型,标记的位置,以及使用图片代替标记.这三个属性可以使用list-style进行合并缩写. 标记list-style-type,在不同的浏览器中大小不和位置的渲染也是有差异的,故很少使用.list-style-image属性可以给无序列表一个自定义的独一无二的表现,不幸的是,在IE下使用此方法添加项目

浏览器兼容性问题解决方案

以下内容参考与dandanzmc文章. 什么是浏览器兼容问题? 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 为什么会出现浏览器兼容问题? 浏览器兼容问题的出现,是因为各个浏览器对W3C标准支持的程度不同而导致的.如果网页都是一个标准的话,也不会又这种问题,但微软把自

浏览器兼容性知识和软件测试计划

一.浏览器兼容性测试介绍 1.定义: 因为不同浏览器对同一代码有不同的解析,造成页面显示效果不统一的情况 2.原因:不同浏览器使用的内核及所支持的HTML等网页语言标准不同及用户客户端环境不同造成显示效果达不到理想效果.eg:网页元素错位.混乱 内核决定了浏览器如何显示网页的内容以及页面的格式信息 常见浏览器有哪些?我们常用的有哪些? IE内核:IE浏览器.傲云浏览器.360浏览器 Webkit内核:谷歌浏览器 safari Gecko内核:火狐浏览器 二.常见浏览器介绍 IE浏览器:使用客户群

pc端不同浏览器兼容性问题及解决方案

代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等. 一.需要注意的地方: 1.写好标准头:<!DOCTYPE html> 2.首先引入初始化css,保证消除不同浏览器的细微差别. <link rel="stylesheet" href="css/style.css"> 具体内容: *{margin:0;padding:0;} body{font-size:12px;line-height:25px;font-family

HTML5 (一)H5基础简介

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

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

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

[cssTopic]浏览器兼容性问题整理 css问题集 ie6常见问题【转】

显示文档结构 JS常见兼容性问题 JS语言本身的兼容性问题 DOM方面的兼容性问题 JS基础库 CSS常见兼容性问题 什么是hasLayout 与hasLayout有关的问题 Peekaboo Guillotine Bug [IE6] Unscrollable Content Bug [IE6] Border Missing [IE6] Three Pixel Text Jog [IE6] 浮动的clear margin的collapsing 滤镜 绝对定位元素的起始点 小结 常见的IE问题及解