HTML5学习笔记（一）video的使用

最新推荐文章于 2024-09-12 09:38:59 发布

原创最新推荐文章于 2024-09-12 09:38:59 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

Web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML5中使用video元素播放视频的方法，包括不同格式的支持、播放控制属性及JavaScript交互示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

目前视频都是使用flash组件来显示的。html5使用了video组件来包含视频。

video组件可以支持3中格式的视频包括oog，MP4，webm三种格式。

一个可以播放的简单视频需要包括

但是并不是每个浏览器都会支持一种视频格式，有时候我们需要把三种视频格式都写出来，组件会播放第一个支持的视频文件。

对于视频播放方式的属性也是一个视频组件中必须的，没有播放方式的属性视频是不能正常播放的。

一共有两种播放方式：1. 通过播放按钮进行视频的播放和暂停。controls这个属性，可以使这个视频组件拥有进度条，开始暂停按钮，音量调节按钮。

2.就绪后直接播放该视频，使用autoplay 属性。

同时我们可以发现有些视频在播放结束后重复播放，这是由于设置了loop属性。

下面展示一个比较简单的视频播放的html5的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video width="250" height="300" autoplay="autoplay" loop="loop">

<source src="/i/movie.ogg" type="audio/ogg"></source>
<source src="/i/movie.mp4" type="audio/mp4"></source>
</video>
</body>
</html>

具体请参考w3cschool网站

同时video组件也可以使用JAVASplit进行控制：

具体给出一个使用实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>

</div>

<script>
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig()
{
myVideo.width=560;
}

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

function makeNormal()
{
myVideo.width=420;
}
</script>

</body>
</html>