📌  相关文章
📜  自定义视频播放器 html5 书籍 - Html (1)

📅  最后修改于: 2023-12-03 15:27:44.097000             🧑  作者: Mango

自定义视频播放器 HTML5 书籍 - HTML

简介

HTML5的出现给网页设计者和开发者带来了巨大的便利，一个主要的变化是它为浏览器提供了内建的视频播放器。但是，浏览器内建的视频播放器并不能满足所有需要，因此需要自定义视频播放器来适应更多的使用场景。

本书将介绍如何通过HTML和JavaScript来创建一个自定义的视频播放器。我们将从简单的播放器开始，讲解如何添加控制界面、播放列表、视频剪辑和字幕等高级功能。

本书适合有一定HTML和JavaScript基础的程序员和网页设计者。

目录
  1. 简单的HTML5视频播放器
  2. 添加播放控制界面
  3. 创建视频播放列表
  4. 剪辑视频
  5. 添加字幕
  6. 支持多语言
简单的HTML5视频播放器

我们首先创建一个简单的HTML5视频播放器，代码如下：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

这是一个包含了两个source子元素的video元素。当浏览器不支持某种格式的视频时，会自动尝试使用该格式下的其他格式。

[markdown]

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>
添加播放控制界面

接下来，我们将向播放器添加控制界面，包括播放/暂停、快进/快退、音量和全屏等控件，代码如下：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.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>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

这里，我们使用了来自Video.js的JavaScript库来添加控制界面。

[markdown]

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.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>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
创建视频播放列表

我们可以将多个视频放入一个播放列表，代码如下：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video1.mp4" type="video/mp4" title="Video 1">
  <source src="video2.webm" type="video/webm" title="Video 2">
  <source src="video3.mp4" type="video/mp4" title="Video 3">
  <source src="video4.webm" type="video/webm" title="Video 4">
  <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>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script>
var player = videojs('my-video');
player.playlist([{
    sources: [{
        src: 'video1.mp4',
        type: 'video/mp4'
    }],
    poster: 'video1-poster.png',
    title: 'Video 1',
}, {
    sources: [{
        src: 'video2.mp4',
        type: 'video/mp4'
    }],
    poster: 'video2-poster.png',
    title: 'Video 2',
}]);
player.playlist.autoadvance(0);
player.playlist.repeat(true);
</script>

这里，我们创建了一个播放列表，并使用Video.js的playlist插件来对播放列表进行控制。

[markdown]

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video1.mp4" type="video/mp4" title="Video 1">
  <source src="video2.webm" type="video/webm" title="Video 2">
  <source src="video3.mp4" type="video/mp4" title="Video 3">
  <source src="video4.webm" type="video/webm" title="Video 4">
  <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>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script>
var player = videojs('my-video');
player.playlist([{
    sources: [{
        src: 'video1.mp4',
        type: 'video/mp4'
    }],
    poster: 'video1-poster.png',
    title: 'Video 1',
}, {
    sources: [{
        src: 'video2.mp4',
        type: 'video/mp4'
    }],
    poster: 'video2-poster.png',
    title: 'Video 2',
}]);
player.playlist.autoadvance(0);
player.playlist.repeat(true);
</script>
剪辑视频

我们可以使用video.js的插件来剪辑视频，代码如下：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.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>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="https://unpkg.com/videojs-trim/dist/videojs-trim.min.js"></script>
<script>
var player = videojs('my-video');
player.trim({
    trimmerThumbWidth: 10,
    handleWidth: 20,
    defaultDuration: 10,
    editable: true
});
</script>

这里，我们使用了videojs-trim插件来添加视频剪辑功能。

[markdown]

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.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>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="https://unpkg.com/videojs-trim/dist/videojs-trim.min.js"></script>
<script>
var player = videojs('my-video');
player.trim({
    trimmerThumbWidth: 10,
    handleWidth: 20,
    defaultDuration: 10,
    editable: true
});
</script>
添加字幕

我们可以为播放器添加字幕，代码如下：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en" label="English"/>
</video>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

这里，我们添加了一个用于选择字幕的select元素，同时使用HTML5的track元素引用了一个VTT格式的字幕文件。

[markdown]

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en" label="English"/>
</video>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
支持多语言

我们可以为播放器添加多语言支持，代码如下：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default/>
</video>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-i18n/dist/videojs-i18n.min.js"></script>
<script>
videojs.addLanguage('zh-CN', {
    "Play": "播放",
    "Pause": "暂停",
    "Current Time": "当前时间",
    "Duration": "总时长",
    "Remaining Time": "剩余时间",
    "Stream Type": "流类型",
    "LIVE": "直播",
    "Loaded": "已缓存",
    "Progress": "播放进度",
    "Fullscreen": "全屏",
    "Non-Fullscreen": "退出全屏",
    "Mute": "静音",
    "Unmuted": "取消静音",
    "Playback Rate": "播放速率"
});
var player = videojs('my-video', {
    language: 'zh-CN'
});
</script>

这里，我们使用了videojs-i18n插件来支持多语言，同时将播放器的语言设置为简体中文。

[markdown]

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default/>
</video>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-i18n/dist/videojs-i18n.min.js"></script>
<script>
videojs.addLanguage('zh-CN', {
    "Play": "播放",
    "Pause": "暂停",
    "Current Time": "当前时间",
    "Duration": "总时长",
    "Remaining Time": "剩余时间",
    "Stream Type": "流类型",
    "LIVE": "直播",
    "Loaded": "已缓存",
    "Progress": "播放进度",
    "Fullscreen": "全屏",
    "Non-Fullscreen": "退出全屏",
    "Mute": "静音",
    "Unmuted": "取消静音",
    "Playback Rate": "播放速率"
});
var player = videojs('my-video', {
    language: 'zh-CN'
});
</script>