way-jsmpeg-player

fork from vue-jsmpeg-player

介绍

相对于原组件剔除了 elementUI 并对界面进了修改；

全局组件

// main.js
import Vue from 'vue'

import { WayJsmpegPlayer } from 'way-jsmpeg-player'
import 'way-jsmpeg-player/lib/way-jsmpeg-player.css'
Vue.use(JSMpegPlayer)

// 或者

import { WayJsmpegPlayer } from 'way-jsmpeg-player'
import 'way-jsmpeg-player/lib/way-jsmpeg-player.css'

Vue.component(WayJsmpegPlayer.name, WayJsmpegPlayer)

局部组件

import { WayJsmpegPlayer } from 'way-jsmpeg-player';
import 'way-jsmpeg-player/lib/way-jsmpeg-player.css';

export default {
  ...

  components: { WayJsmpegPlayer },

  ...
}

使用

<template>
  <div>
    <way-jsmpeg-player :url="url" />
  </div>
</template>

<script>

export default {
  components: {},

  data() {
    return {
      url: "ws://localhost:8089/xxx",
    }
  },
  computed: {
  },

  mounted() {
  },
  beforeDestroy() {
  },
  methods: {}
}
</script>

<style lang="scss">
</style>

使用说明

属性 & Props：

| 名称 | 类型 | 说明 | | --- | --- | --- | | url | string | 视频流地址(推荐 websocket，实际上 jsmpeg.js 原生也支持 http 方式，但没有经过测试) | | title | string | 播放器标题 | | no-signal-text | string | 无信号时的显示文本 | | options | object | jsmpeg 原生选项，直接透传，详见下表 | | closeable | boolean | 是否可关闭（单击关闭按钮，仅抛出事件） | | in-background | boolean | 是否处于后台，如 el-tabs 的切换，路由的切换等，支持.sync 修饰符 | | show-duration | boolean | 是否现实持续播放时 默认关闭间 | | default-mute | boolean | 默认静音 | | with-toolbar | boolean | 是否需要工具栏 | | alwaysShowToolbar | boolean | 是否总是显示工具栏 （with-toolbar 需要设置为 true） | | loading-text | string | 加载时的文本，默认为：LOADING | | videoTipsTopLeft | string | 贴片文案 左上 | | videoTipsTopRight | string | 贴片文案 右上 | | videoTipsBottomLeft | string | 贴片文案 左下 | | videoTipsBottomRight | string | 贴片文案 右下 | | alwaysShowVideoTips | Boolean | 是否总是展示贴片文案 设置为true初始化前或者无信号时总在前台显示；默认false | | autoInit | Boolean |在 url 不为空时总是自动初始化 player;设置为false需要手动调用 initPlayer()初始化|
| autoPlay | Boolean |区别于jsmpeg的options.autoplay；在播放流时设置为false首次onplay()事件时调用pause()；默认为true|
| autoStretch | Boolean | 是否默认开启自动拉伸；默认false | | poster | string |player 海报头图链接地址 区别于 jsmpeg 使用的 options.poster |

原生属性：

| 名称 | 类型 | 说明 | | --- | --- | --- | | canvas | HTMLCanvasElement | 用于视频渲染的 HTML Canvas 元素。如果没有给出，渲染器将创建自己的 Canvas 元素。 | | loop | boolean | 是否循环播放视频(仅静态文件)，默认=true | | autoplay | boolean | 是否立即开始播放（仅限静态文件），默认=false | | audio | boolean | 是否解码音频，默认=true | | video | boolean | 是否解码视频，默认=true | | poster | string | 预览图像的 URL，用来在视频播放之前作为海报显示。 | | pauseWhenHidden | boolean | 当页面处于非活动状态时是否暂停播放，默认=true（请注意，浏览器通常会在非活动选项卡中限制 JS） | | disableGl | boolean | 是否禁用 WebGL，始终使用 Canvas2D 渲染器，默认=false | | disableWebAssembly | boolean | 是否禁用 WebAssembly 并始终使用 JavaScript 解码器，默认=false(不建议设置为 true) | | preserveDrawingBuffer | boolean | WebGL 上下文是否创建必要的“截图” | | progressive | boolean | 是否以块的形式加载数据(仅静态文件)。当启用时，回放可以在完整加载源之前开始。 | | throttled | boolean | 当不需要回放时是否推迟加载块。默认=progressive | | chunkSize | number | 使用时，以字节为单位加载的块大小。默认(1 mb)1024*1024 | | decodeFirstFrame | boolean | 是否解码并显示视频的第一帧，一般用于设置画布大小以及使用初始帧作为"poster"图像。当使用自动播放或流媒体资源时，此参数不受影响。默认 true | | maxAudioLag | number | 流媒体时，以秒为单位的最大排队音频长度（可以理解为能接受的最大音画不同步时间）。 | | videoBufferSize | number | 流媒体时，视频解码缓冲区的字节大小。默认的 512 * 1024 (512 kb)。对于非常高的比特率，您可能需要增加此值。 | | audioBufferSize | number | 流媒体时，音频解码缓冲区的字节大小。默认的 128 * 1024 (128 kb)。对于非常高的比特率，您可能需要增加此值。 |

事件 & Emits：

支持 jsmpeg.js 所有原生事件，并转换为短横线命名法，jsmpeg 官方文档 - 事件

| 名称 | 参数 | 说明 | | --- | --- | --- | | 以下是 vue 组件事件 | - | - | | volume-change | number | 当音量变化时触发 | | muted | number | 当静音时触发 | | 以下是原生事件 | - | - | | video-decode | - | onVideoDecode | | audio-decode | - | onAudioDecode | | play | - | onPlay | | pause | - | onPause | | ended | - | onEnded | | stalled | - | onStalled | | source-established | - | onSourceEstablished | | source-completed | - | onSourceCompleted | | 以下是扩展事件 | - | - | | source-connected | - | 当 websocket 连接上服务端时触发 | | source-interrupt | - | 当 websocket 超过一定时间（5s）没有收到流时触发 | | source-continue | - | 当 onSourceStreamInterrupt 触发后 websocket 第一次接收到流时触发 | | source-closed | - | 当 websocket 关闭后触发 | | resolution-decode | width, height | 当获取到视频分辨率后触发 |

插槽 & Slot:

| 名称 | 参数 | 说明 | | --- | --- | --- | | title | 无 | 标题插槽，使用此插槽后 title 属性失效 | | no-signal | 无 | 无信号时的插槽，使用此插槽后 noSignalText 属性失效 | | video-tips-top | 无 | 顶部贴片文案 | | video-tips-bottom | 无 | 底部贴片文案 |

运行 DEMO

1. 拉取 git 仓库
2. 运行 cmd: npm i
3. 运行 cmd: npm run dev:full
4. 会分别弹出两个命令行窗口，一个是 ffmpeg 转码，一个是中转服务器