好资源导航 » 文章资讯 » vue项目中播放rtmp视频文件流的方法

vue项目中播放rtmp视频文件流的方法

2023-07-16 13:22:03 73

想要播放rtmp视频文件流用H5的video标签是不可行的，所以这里我引用了一款插件vue-video-player，当然想要流畅的运用vue-video-player播放视频还必须安装辅助插件videojs-flash。最后还要特别注意的是必须使用npm安装，当然我在安装过程中也遇到了一个问题，就是在选择使用vue-video-player前还安装了videojs插件，卸载从新安装vue-video-player时由于项目中有以前安装的其他视频组件影响，一直运行不起来，后面我把node_modules相关的视频组件都删除以及package中的安装目录都删除后从新安装就可以运行了，如果你们有遇到这种类似的情况可以对你们有帮助。
下面展示一些相关的操作步骤：
1、安装vue-video-player和videojs-flash插件

npminstallvue-video-player--save
npminstallvideo-flash--save

2、在package里面查看是否安装成功以及安装后的版本，如下图所示：

3、全局引用，在main.js文件中引入，如下图所示：

importVueVideoPlayerfrom'vue-video-player'
import'video.js/dist/video-js.css'
import'videojs-flash'
Vue.use(VueVideoPlayer)

或者是在当前页面引用，如下所示：

import'video.js/dist/video-js.css'
import{videoPlayer}from'vue-video-player'
import'videojs-flash'

在这里我需要特别说明的是引用时必须注意videojs-flash必须要放在vue-video-player的后面，不然同样也会导致视频无法正常播放。
4、下面就是简单的应用案例，如果你需要更多的详细规则可以查看npm插件安装的网站https://www.npmjs.com/package/vue-video-player
完整案例说明如下：

5、部分bug解决办法
①当视频小于400x300时，视频不能自动播放，在flash下面添加静态video-js.swf资源，如上面案例所示；
②如果是像这样（rtmp://192.168.20.185:1935/live/openUrl/l2MJZsI）的流文件，需要在后面加一个/才可以播放
③videojs-flash和vue-video-player的顺序问题，vue-video-player必须放置在videojs-flash之前
④如果都没有上面的问题，可以查看一下是否浏览器的flash是否开起，开起可以在浏览器的设置里面去搜索flash，查到后设置允许即可

总结

到此这篇关于vue项目中播放rtmp视频文件流的文章就介绍到这了,更多相关vue播放rtmp视频文件流内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue项目中播放rtmp视频文件流的方法

热门推荐

随机推荐