Video.js 完整详细的应用

Posted on Updated on

以下是 Video.js 的完整详细应用示例，包括如何集成 Video.js、添加多种视频格式、字幕、封面图、自定义控件等功能。这个示例将展示如何创建一个功能丰富的自适应视频播放器。

完整示例代码

<?php
// 假设视频文件路径存储在变量中
$videoPath = 'path/to/your/video.mp4';
$posterImage = 'path/to/your/poster.jpg'; // 视频封面图
$subtitlePath = 'path/to/your/subtitles.vtt'; // 字幕文件路径
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video.js 完整示例</title>
    <!-- 引入 Video.js CSS -->
    <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
    <style>
        /* 使视频播放器自适应屏幕尺寸 */
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        .video-js {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <!-- Video.js 播放器 -->
        <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360"
               poster="<?php echo $posterImage; ?>" data-setup='{}'>
            <!-- 视频源 -->
            <source src="<?php echo $videoPath; ?>" type="video/mp4">
            <source src="<?php echo str_replace('.mp4', '.webm', $videoPath); ?>" type="video/webm">
            <source src="<?php echo str_replace('.mp4', '.ogg', $videoPath); ?>" type="video/ogg">
            <!-- 字幕 -->
            <track kind="subtitles" src="<?php echo $subtitlePath; ?>" srclang="en" label="English" default>
            <!-- 浏览器不支持 HTML5 视频时的提示 -->
            <p class="vjs-no-js">
                您的浏览器不支持 HTML5 视频，请升级浏览器。
            </p>
        </video>
    </div>

    <!-- 引入 Video.js JS -->
    <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
    <script>
        // 初始化 Video.js 播放器
        var player = videojs('my-video');

        // 自定义控件（可选）
        player.controlBar.addChild('progressControl');
        player.controlBar.addChild('volumePanel');
        player.controlBar.addChild('playToggle');
        player.controlBar.addChild('fullscreenToggle');

        // 监听事件（可选）
        player.on('play', function() {
            console.log('视频开始播放');
        });

        player.on('pause', function() {
            console.log('视频已暂停');
        });

        player.on('ended', function() {
            console.log('视频播放结束');
        });
    </script>
</body>
</html>

功能详解
1. 引入 Video.js
CSS: 通过 link 引入 Video.js 的样式文件。

JS: 通过 script 引入 Video.js 的核心脚本。

2. 视频播放器结构
使用 video 标签创建播放器，并添加 video-js 类以应用 Video.js 的样式。

data-setup='{}’ 用于初始化 Video.js 播放器。

3. 多格式视频支持
通过 source 标签提供多种视频格式（MP4、WebM、Ogg），确保浏览器可以选择支持的格式。

4. 字幕支持
使用标签加载字幕文件（WebVTT 格式），支持多语言字幕。

kind=”subtitles” 表示字幕类型。

srclang 指定字幕语言。

label 为字幕显示的标签。

default 表示默认启用该字幕。

5. 封面图
使用 poster 属性指定视频封面图，在视频加载前显示。

6. 自适应布局
使用 CSS 设置 .video-container 的宽度为 100%，并限制最大宽度为 800px。

height: auto 确保视频播放器高度自适应。

7. 自定义控件
通过 player.controlBar.addChild() 方法可以自定义控件栏的组件（如播放按钮、音量控制、全屏按钮等）。

8. 事件监听
使用 player.on() 方法监听视频播放、暂停、结束等事件，并执行相应的操作。

字幕文件示例（WebVTT 格式）
字幕文件通常使用 .vtt 格式，内容如下：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
这是第一行字幕。

2
00:00:05.000 --> 00:00:08.000
这是第二行字幕。

将字幕文件保存为 subtitles.vtt，并在标签中引用。

运行步骤
将上述 PHP 代码保存为 videojs-example.php。

确保视频文件（MP4、WebM、Ogg）和字幕文件（VTT）路径正确。

将文件上传到支持 PHP 的服务器。

在浏览器中访问该文件，即可看到功能丰富的 Video.js 播放器。

扩展功能
画质切换: 使用 videojs-quality-selector 插件。

播放列表: 使用 videojs-playlist 插件。

广告支持: 使用 videojs-ima 插件。

通过 Video.js 的强大功能和插件生态，你可以轻松实现更多高级功能！

Post Views: 9
Posted in PHP