Vue项目中使用Videojs 展示.m3u8格式视频

最新推荐文章于 2025-04-10 09:31:03 发布

woowen！

最新推荐文章于 2025-04-10 09:31:03 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： VideoJs vue

本文链接：https://blog.youkuaiyun.com/q1ngqingsky/article/details/120832221

版权

本文介绍了在Vue项目中使用Videojs播放.m3u8格式视频的两种方法：通过在index.html引入cdn链接或本地文件，以及使用videojs插件import引入。详细展示了如何在index.html中引入本地的video-js.min.css, video.min.js, videojs-contrib-hls.min.js文件，并在video.vue组件中创建视频播放器，实现播放控制功能。" 125510444,11270056,QT连接MySQL：QMYSQL驱动加载失败的解决办法,"['QT开发', '数据库连接', 'C++', 'MySQL']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中有两种方案引入Videojs

1. 在index.html 中引入cdn链接或者引入本地js/css文件

2. 使用vediojs插件 import引入

1. 在index.html 中引入cdn链接或者本地引入js/css文件

我这里的方式是引入已经下载好的本地文件：

把video-js.min.css，video.min.js，videojs-contrib-hls.min.js 三个文件down在本地，

index.html如下：

<html lang="">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <link href="/compress/css/video-js.min.css" rel="stylesheet">
        <script src='/compress/js/video.min.js'></script>
        <script src="/compress/js/videojs-contrib-hls.min.js"></script>
    </head>

    <script></script>