mpeg-video-player
v1.0.3
Published
支持H264协议的FLV 格式流(HTTP-FLV / WS-FLV)流,MPEG2-TS 格式流(HTTP-TS / WS-TS)流以及M2TS 格式(蓝光TS变种) 视频播放组件
Maintainers
king_npmReadme
mpeg-video-player（简单使用）
项目简介
mpeg-video-player 包含一个视频播放组件 `MpegVideoPlayer.vue`，该组件使用插件哔哩哔哩元flv.js的开发者主导研发的进化版mpegts.js库作为支撑，支持H264协议的FLV 格式流（HTTP-FLV / WS-FLV）流，MPEG2-TS 格式流（HTTP-TS / WS-TS）流以及M2TS 格式（蓝光TS变种） 的视频播放组件，可支持vue写法的多端应用。npm install mpeg-video-player使用示例（vue2 适用版本）
1、引入组件（在入口文件中--main.js），类似于引入 ElementUI 一样
import MpegVideoPlayer from 'mpeg-video-player'
Vue.use(MpegVideoPlayer)2、在需要使用的页面组件中使用该组件
<template>
<div class="video-player-container">
<mpeg-video-player v-if="videoUrl" :idIndex="999" :videoUrl="videoUrl" @player-created="handlePlayerCreated" />
</div>
</template>export default {
name: "VideoPlayerView",
data() {
return {
videoUrl: null,
myPlayerObj: null, // 用于存储子组件的实例对象
};
},
mounted() {
this.videoUrl = "your_video_url_here"; // 替换为实际的视频地址
},
methods: {
// index 是子组件的下标（涉及同时播放多个窗口的时候用），player 是子组件的实例对象，err 是子组件的错误标志（true表示出错，false表示无错）
handlePlayerCreated(e) {
const { index, player, err } = e;
// 此刻就可以想干什干什么了，比如调用子组件的方法，比如获取子组件的错误信息，比如获取子组件的状态等等
this.myPlayerObj = player;
},
},
};
</script>/* 要有宽高否则视频dom无法正常渲染，防止开发者不设置宽高导致播放窗口不显示问题，默认最小宽高插件中已经设定（width:300px; height:169px） */
.video-player-container {
width: 600px; // 根据需要调整宽度
height: 337px; // 根据需要调整高度
}组件参数说明
| 参数名 | 类型 | 默认值 | 描述 | 是否必传 | | --------------- | -------- | ------ | ----------------------------------------------------------------------------- | -------- | | idIndex | Number | - | 子组件的下标（涉及同时播放多个窗口的时候用） | 必传 | | videoUrl | String | - | 视频地址 | 必传 | | playbackRate | Number | - | 视频播放倍速（只有当 isLive 为 false 是生效，即非直播）,现代浏览器可支持 0-16 | 可选 | | videoConfigFa | Object | - | 自定义 video 标签配置，例如 muted,controls 等 | 可选 | | configFa | Object | - | 自定义 flv.js 配置，例如 isLive，hasAudio 等 | 可选 | | configBasicFa | Object | - | 自定义 flv.js 配置（主要是性能的配置，一般用不上），自行百度即可 | 可选 | | @player-created | Function | - | 子组件创建完成后的回调函数，返回子组件的实例对象（播放器实例化对象） | - |
注意事项（由于内置 controls 不好用，建议自定义，本插件建议自定义 controls， 当然也支持使用内置 controls）
configFa 和 configBasicFa 配置项都是一个对象，用于自定义播放器的行为和样式。你可以通过分别传递 configFa 和 configBasicFa 对象来修改播放器的默认行为和样式。以下是简单常见的 configFa 对象的属性及其说明：
| 属性名 | 类型 | 默认值 | 描述 | | ------------- | ------- | ------ | ------------------------------------------------------------------ | | hasVideo | Boolean | true | 是否有视频画面 | | hasAudio | Boolean | false | 是否有视频音效 | | isLive | Boolean | true | 视频播放模式（直播/非直播） | | 其他配置项... | - | - | 你可以根据需要添加其他配置项，参考https://github.com/xqq/mpegts.js |