html video.js 播放 ftp形式的视频链接地址

fruge365

已于 2024-04-10 08:43:51 修改

阅读量315

点赞数 3

文章标签： javascript html 前端

于 2024-04-08 17:21:56 首次发布

本文链接：https://blog.csdn.net/qq_46123200/article/details/137516865

版权

ftp形式的视频地址形如：
file://192.168.x.xx/xxxx/xxx/xxxx/xxxx/xxxx.mp4

<!DOCTYPE html>
<html>

<head>
    <title>Video.js 示例</title>
    <!-- 引入 Video.js 样式 -->
    <link href="http://vjs.zencdn.net/7.10.2/video-js.min.css" rel="external nofollow" rel="stylesheet">
    <script src="http://vjs.zencdn.net/7.10.2/video.min.js"></script>
</head>

<body>

    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
        data-setup="{}">
        <source src="\\192.168.0.50\shared\pics\k32_521_2_result\videos0\1719_1712564546089_4_3.mp4" type="video/mp4">
        <source src="MY_VIDEO.webm" type="video/webm">
        <p class="vjs-no-js">
            您的浏览器不支持视频标签。
        </p>
    </video>

    <!-- 引入 Video.js 库 -->

    <script>
        // 等待视频元素加载完成
        document.addEventListener('DOMContentLoaded', function () {
            var player = videojs('my-video');
            // 监听错误事件
            player.on('error', function () {
                console.log('视频播放发生错误');
            });
            // 监听视频结束事件
            player.on('ended', function () {
                console.log('视频播放结束');
            });
        });
    </script>
</body>

</html>