Springboot项目使用html5的video标签完成视频播放功能

下面是详细的讲解。

1. 引入video.js库

在静态文件目录（如：resources/static/）中引入video.js的库文件。

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />

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

2. 添加video标签

在html中添加video标签用于视频的播放。

<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto"
    data-setup="{}">
    <source src="/videos/demo.mp4" type="video/mp4">
    <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>

其中，src代表视频文件的路径。

3. 编写JavaScript代码

在HTML代码底部添加JavaScript代码。

var player = videojs('my-video', {
    plugins: {
        resolutionSelector: {
            default: '480',
            options: [
                { text: '480P', value: '480' },
                { text: '720P', value: '720' }
            ]
        }
    }
});

这段代码初始化了videojs对象，并且使用了分辨率选择器插件。

示例一

下面是一个示例，将video播放器插入到页面中，展示视频播放的效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML5 Video播放器</title>
    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</head>

<body>
    <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto"
        data-setup="{}">
        <source src="/videos/demo.mp4" type="video/mp4">
        <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>
        var player = videojs('my-video', {
            plugins: {
                resolutionSelector: {
                    default: '480',
                    options: [
                        { text: '480P', value: '480' },
                        { text: '720P', value: '720' }
                    ]
                }
            }
        });
    </script>
</body>

</html>

示例二

下面是一个在SpringBoot项目中使用video播放器的示例，将video播放器插入到Thymeleaf模板中。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>SpringBoot HTML5 Video播放器</title>
    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</head>

<body>
    <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto"
        data-setup="{}">
        <source th:src="@{${videoUrl}}" type="video/mp4">
        <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>
        var player = videojs('my-video', {
            plugins: {
                resolutionSelector: {
                    default: '480',
                    options: [
                        { text: '480P', value: '480' },
                        { text: '720P', value: '720' }
                    ]
                }
            }
        });
    </script>
</body>

</html>

在这个示例中，我们使用了SpringBoot的Thymeleaf模板引擎，通过${videoUrl}动态的引用了视频文件的路径。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Springboot项目使用html5的video标签完成视频播放功能 - Python技术站

Springboot项目使用html5的video标签完成视频播放功能

1. 引入video.js库

2. 添加video标签

3. 编写JavaScript代码

示例一

示例二

相关文章