HTML5中的视频代码详解-Tutorial H5-php.cn

HTML5中的视频代码详解

寻∝梦

Lepaskan： 2018-08-13 18:53:01

asal

3613 orang telah melayarinya

本篇主要讲述的就是HTML5Video的一部分章节，比较适合新手学习HTML5的一些东西，下面来试试这个元素的结构。

HTML5 Video(视频)

很多站点都会使用到视频. HTML5 提供了展示视频的标准。

Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

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

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持元素.

注意: Internet Explorer 8 或者更早的IE版本不支持元素。

HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Salin selepas log masuk

您的浏览器不支持 HTML5 video 标签。

元素提供了播放、暂停和音量控件来控制视频。

同时元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

元素支持多个元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

HTML5 - 使用 DOM 进行控制

HTML5 和元素同样拥有方法、属性和事件。

和元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，元素开始播放、已暂停，已停止，等等。

例中简单的方法，向我们演示了如何使用元素，读取并设置属性，以及如何调用方法。

<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">

Salin selepas log masuk

您的浏览器不支持 HTML5 video 标签。

</video>
</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>

Salin selepas log masuk

HTML5 Video 标签

定义多种媒体资源，比如

定义在媒体播放器文本轨迹

HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Salin selepas log masuk

您的浏览器不支持 HTML5 video 标签。

元素提供了播放、暂停和音量控件来控制视频。

与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

【相关推荐】

html的基础元素，让你零基础学习HTML

HTML5使用Video 元素

Atas ialah kandungan terperinci HTML5中的视频代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!