vue项目中播放rtmp视频文件流的方法_xgplayerm3u8 - CSDN文库

151 浏览量更新于2023-05-03 评论 1 收藏 66KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

想要播放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插件

npm install vue-video-player --save

npm install video-flash --save

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

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

import VueVideoPlayer from '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

完整案例说明如下：

<template>

<videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer"

:playsinline="true" width="90%" :options="playerOptions"

customEventName="changed" @play="onPlayerPlay($event)">

</videoPlayer>

</template>

<script>

import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'

import 'videojs-flash'

export default {

components: {

videoPlayer

},

data(){

return{

playerOptions: {//测试视频流数据

width: "210",

height: "134",

language: 'zh-CN',

techOrder: ['flash'],

muted: true,

autoplay: true,

controls: true,

loop: true,

sources: [{

type: 'rtmp/mp4',

src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //rtmp流地址

}],

poster: 'static/fire/bgpp.png',

flash:{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38710198

粉丝: 6
资源: 914

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈