美文网首页
HTML5 Video(视频)

HTML5 Video(视频)

作者: 龍飝 | 来源:发表于2018-03-21 13:54 被阅读92次

Web站点上的视频:直到现在,仍然不存在一项旨在网页上显示视频的标准
今天,大多数视频通过插件(比如Flash)来显示。然而,并非所有浏览器都拥有同样的插件
HTML5规定了一种通过video元素来办函视频的标准方法

如需在HTML5中显示视频,需要的是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

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

</body>
</html>

<video>元素提供了播放、暂停和音量控件来控制视频
同时<video>元素也提供了width和height属性控制视频的尺寸,如果设置的高度和宽度,所需的视频空间会在页面加载是保留,如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变
<video>与</video>标签之间插入的内容是提供给不支持video元素的浏览器显示的
<video>元素支持多个<source>元素,<source>元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式

视频格式与浏览器的支持
当前,<video>元素支持三种视频格式,MP4,WebM和Ogg
浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (从 Opera 25 起) YES YES

1.MP4=带有H。264视频比那吗和AAC音频编码的MPEG4文件
2.WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
3.Ogg=带有Theora视频编码和Vorbis音频编码的Ogg问价

HTML5<video>-使用Dom进行控制
HTML5<video>和<audio>元素同样拥有方法和属性和事件
<video>和<audio>元素的方法、属性和事件可以使用JavaScript进行控制
其中的方法用于播放、暂停以及加载等,其中属性(比如时长、音量等)可以被读取或设置,其中DOM事件能够通知你
比方说,<video>元素开始播放、已暂停、已停止等等
李忠简单的方法,向我们延时了如何使用<video>元素,读取并设置属性,以及如何调用方法
下例微视频创建简单的播放、暂停以及调整尺寸空间
<!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>


<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 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>

HTML5 Video标签
标签 描述 |
[<video>] 定义一个视频
[<source>] 定义多种媒体资源,比如 <video> 和<audio>
[<track>] 定义在媒体播放器文本轨迹

相关文章

  • HTML5 Video(视频)+Audio(音频)

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

  • HTML5视音频处理、画布

    视频处理 video 插入video 在HTML5中我们可以使用video标签在网页中插入视频: 考虑到浏览器兼容...

  • H5视频播放

    html5新增了音频/视频(audio/video)的API。这次我们先来了解video。video 元素支持三种...

  • 火狐放不了html5 video MP4格式

    火狐放不了html5 video MP4格式 这里教大家解决火狐播放html5 video时 显示视频或mime类...

  • H5视频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法。 · 1.视频格式 当前,video 元素支持三...

  • HTML部分

    [HTML5音视频] 这里只介绍HTML5在音视频部分新添加的标签的基本用法。 视频 video标签 基本信息 v...

  • HTML5 Video(视频)

    Web站点上的视频:直到现在,仍然不存在一项旨在网页上显示视频的标准今天,大多数视频通过插件(比如Flash)来显...

  • HTML5 Video(视频)

    近期谷歌浏览器宣布也不再支持flash插件,Hlml播放视频学习很有必要实例: 元素提供了 播放、暂停和音量控件来...

  • 2019-10-30

    android webview 支持html5 video 播放视频在自定义的 WebChromeClient 中...

  • Video.js

    video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频,以及YouTube和Vim...

网友评论

      本文标题:HTML5 Video(视频)

      本文链接:https://www.haomeiwen.com/subject/ttvvqftx.html