Vue + videojs播放 rtmp/flv 类型视频

最新推荐文章于 2025-06-11 23:22:13 发布

原创最新推荐文章于 2025-06-11 23:22:13 发布 · 7.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #视频

Vue相关专栏收录该内容

13 篇文章

订阅专栏

博客提及了HTML和JS，它们是前端开发的重要技术。HTML用于构建网页结构，JS可实现网页的交互效果和动态功能，在前端开发中发挥着关键作用。

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

HTML

 <h1>my-player</h1>
     <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
       poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
     <source src='rtmp://10.10.7.211/live/test' type='rtmp/flv'/>
 </video>

npm install --save videojs-flash
npm install video.js

 //需要安装
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'





 // vue挂载钩子函数
//不能在created钩子函数中，dom节点没有挂载完全。ID找不到
mounted() {
        //谷歌浏览器要专门去开启flash播放器，打包后查看和代码运行都需要重新设置flash为允许状态

       // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器

     videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
     
     var player = videojs('my-player'); //my-player为页面video元素的id

     player.play(); //播放
}