您现在的位置是：首页> 前端问题 > 正文

HTML5 操作视频

时间： 2022-05-26 16:55:11 来源：网络作者：自由分类：前端问题

简介：

HTML5出现之前，我们想要在浏览器中进行视频的播放是很麻烦的，需要使用到浏览器中的插件，其中以flash插件为主，但是在HTML5中规定了浏览器可以播放视频的标准：使用video标签可以控制播放给定格式的视频，因为HTML是标记语言，它所有的功能实现都是以标签为主，所以播放视频当然也使用了标签语法

》HTML5 在浏览器中播放视频

HTML5出现之前，我们想要在浏览器中进行视频的播放是很麻烦的，需要使用到浏览器中的插件，其中以flash插件为主，但是在HTML5中规定了浏览器可以播放视频的标准：使用video标签可以控制播放给定格式的视频，因为HTML是标记语言，它所有的功能实现都是以标签为主，所以播放视频当然也使用了标签语法

HTML5 支持的视频格式

HTML5 规定了可以通过 video 标签来包含要播放的视频的标准方法。但遗憾的是在这个标准中只是规定了几种视频格式标准，并不是支持所有主流的视频格式，video标签目前只支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG	9.0+	不支持	不支持	5.0+	3.0+
WebM	不支持	4.0+	10.6+	6.0+	不支持

三种视频格式说明：

格式	MIME-type	说明
MPEG	video/mp4	使用 H.264 视频编码和 AAC 音频编码的 MPEG 4 视频文件
Ogg	video/ogg	使用 Theora 视频编码和 Vorbis 音频编码的 Ogg 视频文件
WebM	video/webm	使用 VP8 视频编码和 Vorbis 音频编码的 WebM 视频文件

HTML5 视频播放实例

我们在学习任何新东西的时候，直接从实例入手，先亲自动手操作他的整个运作过程，这样对于我们对新事物的认识和理解是非常深刻的，对于HTML5 播放视频，我们先看他如何编写，如下代码：

一、使用简单格式的video标签播放视频

<video src="movie.ogg"></video> <!-- src 属性表示视频文件的URL路径 -->

二、使用带有播放控件的video标签播放视频

<video src="movie.ogg" controls="controls"></video> <!-- controls 属性供添加播放、暂停和音量控件 -->
<video src="movie.ogg" width="320" height="240" controls="controls"></video>  <!-- 带有自定义长宽的视频播放窗口 -->

如果没有设置长宽属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

三、使用video标签的浏览器兼容提示功能

<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持video标签
</video>

在<video> 与 </video> 之间插入的内容可以在不支持 video 元素的浏览器中直接显示出来，但是不建议这样使用，建议开发者使用JS提前判断浏览器的兼容性。

四，使用video标签和source标签来提高浏览器播放视频的兼容性

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
</video>

在上面其他的例子中我们使用了一个 Ogg 的视频文件，它只适用于在Firefox、Opera 以及 Chrome 浏览器中进行播放。要想在 Safari 浏览器中进行播放，需要使用到MPEG4 类型的视频文件；video 标签允许包含多个 source 标签。source 标签可以链接不同的视频文件。浏览器将会在这些source 标签引入的视频文件中使用第一个可识别的视频格式进行播放。

》HTML5 video标签的属性

属性名	属性值	描述
autoplay	autoplay	如果在video标签中使用该属性，则视频在加载完成后马上播放
controls	controls	如果使用该属性，则向用户显示控件，比如播放按钮、播放进度等
height	pixels	设置视频播放器的高度
loop	loop	如果使用该属性，则当视频文件完成播放后会再次开始重复播放
preload	preload	如果使用该属性，则视频在页面加载时就开始进行加载，并预先准备好播放，如果使用 "autoplay"，则忽略该属性
src	url	要播放的视频的 URL地址
width	pixels	设置视频播放器的宽度

》HTML5 使用DOM控制Video标签

在HTML中，它其中包含的所有标签元素，从DOM角度来看他们都有三大要素：属性、方法、事件；HTML5 <video> 标签和其他HTML标签一样也同样拥有方法、属性和事件。

video 标签中的方法用于控制视频的播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被我们动态的读取和设置。其中的 DOM 事件能够在视频开始播放、视频已暂停播放、视频已停止播放等状态时通知我们，我们利用事件回调函数进行相应的业务处理。

使用DOM控制Video简单实例：读取并设置他的属性、调用方法、监听开始播放事件

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center;">

    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br />

    <video id="video" width="420" style="margin-top:15px;">
        <source src="/upload/video/video_example.mp4" type="video/mp4" />
        <source src="/upload/video/video_example.ogg" type="video/ogg" />
        您的浏览器不支持Video标签
    </video>
</div>

<script type="text/javascript">

    var demoVideo=document.getElementById("video"); //使用DOM获取video对象

    function playPause()  {
        if (demoVideo.paused) //读取video播放状态属性
            demoVideo.play(); //调用video的方法，开始播放
        else
            demoVideo.pause(); //调用video的方法，暂停播放
    }

    function makeBig()  {
        demoVideo.width=560; //设置video宽度属性
    }

    function makeSmall()  {
        demoVideo.width=320;
    }

    function makeNormal()  {
        demoVideo.width=420;
    }

</script>

</body>
</html>

》Video标签中的方法、属性以及事件列表

列表中列出了当今主流浏览器支持的video标签的方法、属性和事件，在下列列表的属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。其他属性在视频的元数据已加载后才可使用；对于每个属性、方法和事件的使用示例请参考《HTML 参考手册》

属性	方法	事件
currentSrc	play()	play
currentTime	pause()	pause
videoWidth	load()	progress
videoHeight		error
duration		timeupdate
ended		ended
error		abort
paused		empty
muted		emptied
seeking		waiting
volume		loadedmetadata
height
width

标签：HTML 5基础入门

文章声明

本文标题: HTML5 操作视频

上一篇：什么是HTML5？

下一篇：HTML音频操作