HTML5中如何显示视频HTML5视频播放

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在HTML5中,video元素目前支持三种格式的视频文件,
1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

那么在HTML5中如何显示视频呢?例子如下:

代码如下:

<video src="demo.mp4" width="500" height="250" controls="controls">您的浏览器不支持此种视频格式。</video>


了,现在来解释下video元素中各属性的含义,其中width、height就不解释了啊,主要说下controls,顾名思义,controls
就是控件们,哈哈,就是视频的播放、音量暂停等控件。video元素中间插入的汉字,聪明的你一定知道的,是提示用户浏览器不支持视频格式使用的。


要注意的是,要确保适用于Safari 浏览器,视频文件必须是 MP4类型。而ogg格式的视频则是适用于Firefox、Opera
以及Chrome 浏览器。Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的
video 元素的支持。

当然了,我们如果不确定自己的浏览器支持什么格式的视频,可以先检测一下,检测方法在另一片博文里有,感兴趣的可以去看一下。若是不想麻烦,那怎么办呢?我们可以这样:

代码如下:

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。
接下来,介绍几个video标签的属性,
1.autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"
2.controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"
3.height:设置高度
4.width:设置宽度
5.loop:自动重播,用法:loop="loop"
6.preload:视频在页面加载时进行加载并预备播放,用法:preload="auto"
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
注意:若使用了autoplay,则忽略preload
7.src:要播放视频的url

时间: 2024-12-27 15:04:16

HTML5中如何显示视频HTML5视频播放的相关文章

html5声频audio和视频video

html5作为下一代web标准,年前轩起了html5热潮.对于html5我只是本着了解看看.关于html5和RIA(silverlight,flash,JavaFx等)我不想说什么,也没有什么可说的,存在就有其存在的理由.孰优孰劣,留给事实.时间来证明的. 在html5中出现了一些新特性: canvas 元素 视频 video 和 声频audio 元素 : 对本地离线存储(localStorage,sessionStorage)的支持 : 新增特殊内容元素:article.footer.head

HTML5中新加的标签和属性定义

HTML5 <!DOCTYPE> 标签所有主流浏览器都支持 <!DOCTYPE> 声明.<!DOCTYPE> 声明非常重要,它是一种标准通用标记语言的文档类型声明,通过该标签,浏览器能够了解HTML5文档正在使用的HTML规范,<!DOCTYPE> 声明是HTML5文档的起始点,也就是说它必须位于HTML5文档的第一行!标签定义及使用说明:<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.<!DO

html5声频audio和视频video说明

现在已经掀起了html5热潮,本文来说明下html5声频audio和视频video 在html5中出现了一些新特性: * canvas 元素    * 视频 video 和 声频audio 元素 :    * 对本地离线存储(localStorage,sessionStorage)的支持 :    * 新增特殊内容元素:article.footer.header.nav.section :    * 新增表单控件: calendar.date.time.email.url.search . 今天

html5中的网页结构

一.html5中的大纲 在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲.因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个局部使用整体样式时.http://gsnedders.html5.org/outliner/网站中有一个文档大纲分析器,可以将文档大纲以可视化的形式展示出来."Untitled Section"表示缺乏标题 二.大纲的编排规则 关于内容区块的编排,可以分为显示编排与隐式编排两种方式. 1.

HTML5中与页面显示相关的API

1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小化状态或者用户将浏览器标签切换到其他标签时会触发. Page Visibility API的使用场合如下: 一个应用程序中具有多幅图片的幻灯片式的连续播放功能,当页面变为不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),图片停止播放,当页面变为可见状态时,图片继续播放. 在一个实时显示服

html5中视频播放问题总结

html5中视频播放问题总结 文章 1.问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" controls="controls"></video> 2.问题2 控制? 简单! <video id="video1" src="/video1.mp4" autoplay></video> 其他控制方式 :见

在 HTML5 中捕获音频和视频

简介 长久以来,音频/视频捕获都是网络开发中的"圣杯".多年来,我们总是依赖于浏览器插件(Flash 或 Silverlight)实现这一点.快来看看吧! 现在轮到 HTML5 大显身手了.也许看起来不是很显眼,但是 HTML5 的崛起引发了对设备硬件访问的激增.地理位置 (GPS).Orientation API(加速计).WebGL(GPU) 和 Web Audio API(视频硬件)都是很好的例子.这些功能非常强大,展示了基于系统底层硬件功能之上的高级 JavaScript AP

HTML5中video的使用一

<!DOCTYPE html> <html> <head> <title>HTML5 </title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script src="jquery-1.9.1.min.js"></script> <script type="text

HTML5媒体(音频/视频)

摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 浏览器: 从IE9已经开始支持audio和video标签. Audio: <audio> 标签定义声音,比如音乐或其他音频流. 音频格式:    IE9  Firefox3.5  Opera10.5