`

HTML5新特性--video视频标签

阅读更多
video标签--定义视频,比如电影片段或其他视频流。

(一)常用属性:

autoplay:如果出现该属性,则视频在就绪后马上播放。
src:要播放的视频的 URL。
control: 如果出现该属性,则向用户显示控件,比如播放按钮。
           浏览器控件包括:播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)


(二)目前支持三种视频格式:




<video type="video/mp4" src="../movie.mp4" controls="controls">   
浏览器不支持HTML5的新标签video   
<!--<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的-->
</video>  


为了防止浏览器不识别视频格式,我们该怎么办呢?HTML5中添加了source标签,video 元素允许多个 source 元素。source 元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。

<video width="320" height="240" controls="controls">
  <!--height&weight设置视频窗口的高度和宽度-->  
  <source src="movie.ogg" type="video/ogg">  
  <source src="movie.mp4" type="video/mp4">  
浏览器不支持HTML5的video标签。  
</video>  


  • 大小: 18.1 KB
分享到:
评论

相关推荐

    HTML5新特性1

    语法:Canvas标签-绘制文本Canvas标签-绘制图像Canvas标签-绘制图像HTML5 Video标签(视频)HTML5 Audio(音频)Number

    前端面经文档-技术要点-面试编程题-资源-html-前端-web-计算机-计算机前端面试题目-校招

    情况以及优化HTML5新特性 答:语义化标签、音视频、画布、矢量图、本地存储 1、语义化标签,比如header、footer、nav、aside、article、section 2、音视频,比如audio、video 3、画布canvas、矢量图svg 画布,...

    HTML5高级程序设计

    本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、...

    微信小程序-微信小程序渲染html

    支持的特性: 大部分的普通HTML标签(未全部测试) , &lt;video&gt;, &lt;audio&gt; , , , 等表格标签 标签转`` HTML entities 七牛图片裁剪 自定义插件 不支持&lt;form&gt;, ,等表单元素. 使用方法 请参考pages/...

    HTML5视频播放器支持电脑PC端与移动手机页面.zip

    HTML5视频播放器:作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。...

    旧版HTML和HTML5网页设计

    笨文档主要介绍HTML基本结构,HTML基本标签,HTML5新特性标签有趣的新特性:用于绘画的canvas 元素;用于媒介回放的video 和audio 元素; 对本地离线存储的更好的支持;新的特殊内容元素,比如article、footer、...

    使用HTML5在网页中嵌入音频和视频播放的基本方法

    HTML5 特性,包括原生音频和视频支持而无需 Flash。 HTML5 &lt;audio&gt; 和 &lt;video&gt; 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停...

    HTML5+CSS3页面

    使用HTML5和CSS3实现的页面展示,包含Canvas,video等新标签特性,背景图实现了自适应屏幕大小

    HTML5开发工具

    DW CS5 将获得以下新特性 1.多屏幕预览面板,适用于同时为不同设备开发 HTML 应用 2.支持对 HTML 5 新增的标签库的代码提示 3.支持对 CSS 3 代码提示 4.增加 Video 和 Audio 标签的实时预览 5.改进 CSS 3 实时预览...

    HTML5学习心得总结(推荐)

    •用于绘画的 canvas 元素•用于媒介回放的 video 和 audio 元素•对本地离线存储的更好的支持•新的特殊内容元素,比如 article、footer、header、nav、section•新的表单控件,比如 calendar、date、time、email、...

    8天快速掌握Android教程源码

    44_在线视频播放器.avi 所在项目:videoplayer 45_拍照.avi 所在项目:takepicture 46_视频刻录.avi 所在项目:videoRecorder 47_手势识别.avi 所在项目:gesture & GestureBuilder 48_实现软件国际化.avi 所在项目...

    传智播客的android开发源代码

    44_在线视频播放器.avi 所在项目:videoplayer 45_拍照.avi 所在项目:takepicture 46_视频刻录.avi 所在项目:videoRecorder 47_手势识别.avi 所在项目:gesture & GestureBuilder 48_实现软件国际化.avi 所在项目...

    h5player:网页播放器增强脚本,支持:播放进度记录,播放倍率记录,快进快退,倍速播放,画面缩放等

    h5player为tampermonkey网页播放器增强脚本项目地址: : 脚本安装地址: ://greasyfork.org/scripts/381682特性兼容广泛,所有存在视频标签的网页均支持甚至嵌在iframe,shadowdom下合理兼容支持跨域控制,跨域限制...

    source.zip

    44_在线视频播放器.avi 所在项目:videoplayer 45_拍照.avi 所在项目:takepicture 46_视频刻录.avi 所在项目:videoRecorder 47_手势识别.avi 所在项目:gesture & GestureBuilder 48_实现软件国际化.avi 所在项目...

    fee-interview-questions:前端面试题库

    说说HTML5有那些新特性,移除了哪些元素? HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 canvas, video, audio, localStorage, sessionStorage, Geolocation,APP Cache,web ...

    dreamweaver的各种组件

    IE Rollover Blend Shadow 利用IE4支持的新的DHTML特性,响应鼠标时间后给指定的文字加上一 个倾斜投影效果。 IE Sliding Tiles 创建一个响应鼠标事件的自动弹出式下拉菜单,实例可见http://www.webmokey.com ...

    webkit引擎界面系统-看片神器界面-易语言

    2、HTML所有标签都是容器,CSS调试效果方便 3、最重要的一点,让做界面的去界面,写程序的去写程序吧,界面与程序分享得更彻底 4、支持js、jq和易语言 交互! 5、窗口尺寸自适应; 6、支持FLASH; 7、网页文件可以...

Global site tag (gtag.js) - Google Analytics