html5--video播放

最新推荐文章于 2024-06-17 19:10:54 发布

不屈的猿

最新推荐文章于 2024-06-17 19:10:54 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： html5

本文链接：https://blog.csdn.net/sky_0035/article/details/52215870

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

demo

<html>
<head>
<title>Hello,kitty</title>
</head>
<body>
<video src="D:\迅雷下载\圣杯神器：骸骨之城.mp4" width="1920" height="1080" autoplay="autoplay">
Your browser does not support the video tag.
</video>
</body>
</html>

说明：

视频格式

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

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	设置视频播放器的宽度。

实例

设置为自动播放的 video 元素：

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

定义和用法

autoplay 属性规定一旦视频就绪马上开始播放。

如果设置了该属性，视频将自动播放。

HTML 4.01 与 HTML 5 之间的差异

autoplay 属性是 HTML 5 中的新属性。

语法

<video autoplay="autoplay" />

实例

带有浏览器默认控件的 video 元素：

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

定义和用法

controls 属性规定浏览器应该为视频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）

HTML 4.01 与 HTML 5 之间的差异

controls 属性是 HTML 5 中的新属性。

语法

<video controls="controls" />

实例

设置为循环播放的 video 元素：

<video controls="controls" loop="loop">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

定义和用法

loop 属性规定当视频结束后将重新开始播放。

如果设置该属性，则视频将循环播放。

HTML 4.01 与 HTML 5 之间的差异

loop 属性是 HTML 5 中的新属性。

语法

<video loop="loop" />

实例

设置为预加载的 video 元素：

<video controls="controls" preload="auto">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

定义和用法

preload 属性规定是否在页面加载后载入视频。

如果设置了 autoplay 属性，则忽略该属性。

HTML 4.01 与 HTML 5 之间的差异

preload 属性是 HTML 5 中的新属性。

语法

<video preload="load" />

属性值

值	描述
load	规定是否预加载视频。可能的值： auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频

实例

一个视频播放器：

<video controls="controls" src="movie.ogg">
Your browser does not support the video tag.
</video>

定义和用法

src 属性规定要播放的视频的 URL。

也可以使用 <source> 标签来设置视频。

HTML 4.01 与 HTML 5 之间的差异

src 属性是 HTML 5 中的新属性。

语法

<video src="URL">

属性值

值	描述
URL	视频文件的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg"）相对 URL - 指向网站内的文件（比如 href="song.ogg"）

不屈的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5--video播放

demoHello,kittyYour browser does not support the video tag.说明：视频格式当前，video 元素支持三种视频格式：格式IEFirefoxOperaChromeSafariOggNo3.5+
复制链接

扫一扫