HTML插入视频的方法

2021-08-26 12:14:43
2282次极悦

有多种方法可以在您的网站中插入视频。所述<嵌入>，<FRAME>和<对象>正被用于插入视频到HTML文档的标签。但是它们现在已被弃用，所以让我们来看看如何使用<video>和<iframe>标签。

使用<video>标签在HTML中插入视频

<video>标签与它的兄弟<audio>一起添加到HTML5中。在HTML5发布之前，视频只能在带有插件(如 Flash)的浏览器中播放。HTML5<video>元素指定了在网页中嵌入视频的标准方式。也就是说通过在源属性中添加视频网址来标识视频。人们可以使用它来嵌入从计算机导入或由外部网站托管的视频。

对于基本的使用，我们只需要在HTML文档中添加视频URL到元素中，通过使用<source>元素来标识视频 URL 并添加控件属性，以便网站访问者可以控制视频选项。使用宽度和高度属性来设置视频的大小也很重要。让我们看一个简单的例子。

在 HTML 中插入视频的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/_m_/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

至少，要使用<video>元素，需要使用以下属性：

src，它定义了托管视频内容的 URL，

type，它定义了文件的格式，

control，必须指定，否则将不会出现控制内容播放的视觉元素。

此外，还有几个可选属性可用于影响视频内容的加载方式。这些属性包括：

autoplay，指定视频一准备好就开始播放，

loop，它指定视频每次结束时都会重新开始，

poster，它选择一个图像作为视频的海报显示，直到播放开始，

preload，它告诉作者在页面加载时应该如何加载视频。

如何设置视频自动播放

要为视频设置自动播放，您只需为<video>标签添加autoplay属性，如下所示：

<video width="320" height="240" autoplay>

设置视频自动播放示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/_m_/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p><strong>Note:</strong> The autoplay attribute will not work on some mobile devices.</p>
  </body>
</html>

使用<iframe>标签从Youtube插入视频

以 HTML 格式播放视频的最简单方法是使用YouTube作为源。首先，您需要将视频上传到YouTube或复制现有视频的嵌入代码，该代码将插入您网页的<iframe>元素中。

要获得YouTube视频的嵌入链接，请按照以下简单步骤操作：

在YouTube上打开视频，然后单击共享按钮。

打开嵌入代码。

复制源链接。

当您复制嵌入链接时，您可以将其作为<iframe>元素的src插入到您的 HTML 文档中。此外，定义视频的宽度和高度。

使用<iframe>标签从Youtube插入视频的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Steve Jobs - How to Live before You Die</h2>
    <p>At his Stanford University commencement speech, Steve Jobs, CEO and co-founder of Apple and Pixar, urges us to pursue our dreams and see the opportunities in life's setbacks - including death itself.</p>
    <iframe width="500" height="320" src="http://www.youtube.com/embed/lcZDWo6hiuI">
    </iframe>
  </body>
</html>

以上就是极悦小编介绍的"HTML插入视频的方法"，希望对大家有帮助，想了解更多可查看HTML教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。

上一篇：HTML表单示例下一篇：HTML滚动条的创建及示例