HTML5-Video（视屏播放）

最新推荐文章于 2023-08-03 11:19:09 发布

llayjun

最新推荐文章于 2023-08-03 11:19:09 发布

阅读量733

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/llayjun/article/details/77243342

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML5-Video（视屏播放）

Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

HTML5加载视屏

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

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

说明：

<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

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - 使用 DOM 进行控制

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

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

<body>
        <video id="video_demo" width="300" height="250" controls="">
            //它会寻找能播放的第一个资源
            <source src="img/millets.mp4" type="audio/mp4"></source>
            <source src="img/millets.ogg" type="audio/ogg"></source>
            您的浏览器不支持 HTML5 video 标签。
        </video>

        <br />

        <div style="text-align: center">
            <button onclick="playpause()">暂停/播放</button>
            <button onclick="makeBig()">放大</button>
            <button onclick="makeSmall()">缩小</button>
            <button onclick="makeNormal()">普通</button>
        </div>
        <script>
            var _video = document.getElementById("video_demo");

            //播放或暂停
            function playpause() {
                if(_video.paused) {
                    _video.play();
                } else {
                    _video.pause();
                }
            }

            //放大
            function makeBig() {
                _video.width = 500;
                _video.height = 400;
            }

            //缩小
            function makeSmall() {
                _video.width = 200;
                _video.height = 100;
            }

            //普通
            function makeNormal() {
                _video.width = 300;
                _video.height = 250;
            }
        </script>
    </body>

HTML5 Video 标签

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

llayjun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-Video（视屏播放）

HTML5-Video（视屏播放）Web站点上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。HTML5加载视屏如需在 HTML5 中显示视频，您所有需要的是：您的浏览器不支持Video标签。说明：
复制链接

扫一扫

专栏目录