在HTML中嵌入本地视频播放器

翻滚的胖子
2023-06-09 11:46:53
前端技术
HTML JavaScript

本文将为大家介绍如何在HTML页面中嵌入本地视频播放器，并详细讲解播放器的相关参数和使用细节。

一、HTML5 Video 标签

HTML5 新增了一个 <video> 标签，可用于在网页上嵌入视频。

使用该标签时，需要指定 src 属性，即视频文件的路径，如下所示：

<video src="example.mp4"></video>

其中，<video> 标签中间的内容为备用内容，当浏览器不支持该标签时会显示这部分内容。

二、HTML5 Video 属性

在 <video> 标签中，常用的属性如下：

controls：是否显示视频控制栏，默认为显示。
autoplay：是否自动播放，默认不播放。
loop：是否循环播放，默认不循环。
muted：是否静音播放，默认不静音。
preload：预加载视频，默认为 auto，即浏览器会自动选择最佳的加载方式。

在使用时，只需在 <video> 标签中添加对应属性即可，如下所示：

<video src="example.mp4" controls autoplay loop muted preload="auto"></video>

三、使用开源播放器

除了使用 <video> 标签外，也可以使用一些开源的视频播放器，如 Video.js、jPlayer 等。

以 Video.js 为例，只需将其相关文件下载并引入到HTML页面中，即可使用该播放器。

<!-- 引入 Video.js 核心文件 -->
<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>

<!-- 引入 Video.js 插件，如需使用 -->
<!--<link href="videojs-resolution-switcher.css" rel="stylesheet">-->
<!--<script src="videojs-resolution-switcher.js"></script>-->

<!-- 在页面中插入视频播放器 -->
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="example.jpg" data-setup='{"example_option":true}'>
    <source src="example.mp4" type='video/mp4'>
    <source src="example.webm" type='video/webm'>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

<!-- 初始化 Video.js 播放器 -->
<script>
  var player = videojs('my-video', {"example_option":true});
</script>