npm-test-ower v0.2.14

npm-test

安装

npm i npm-test-ower

在node_modules文件夹内找到npm-test-ower下lib文件夹，拷贝livePlayer和jessibuca至public下，index.html加入两段代码

<script src="livePlayer/liveplayer-lib.min.js"></script>
<script src="jessibuca/index.js"></script>

全局引入

//main.js
import Vue from 'vue'
import npmTest from 'npm-test-ower'
import 'npm-test-ower/lib/npm-test-ower.css';

Vue.use(npmTest)

new Vue({
  render: h => h(App)
}).$mount('#app')

按需引入

在src下创建plugins文件夹，引入npm-test-ower,并导入需要的播放器

/* plugins/index.js */
import npmTest from 'npm-test-ower'
import 'npm-test-ower/lib/npm-test-ower.css';

const { livePlayer, jessibuca } = npmTest

export default {
    jessibuca,
    livePlayer
}

在main.js使用导出的播放器

/* main.js */
import Vue from 'vue'
import npmTest from './plugins/index'

Object.keys(npmTest).forEach((keys) => {
  Vue.use(npmTest[keys])
})

new Vue({
  render: h => h(App)
}).$mount('#app')

播放器应用

<template>
  <div class="about">
    <div class="video">
      <jessibuca :option="options"></jessibuca> <!-- jessibuca -->
      <live-player :option="options"></live-player> <!-- livePlayer -->
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      //播放器配置项，url为播放器播放的url地址，其余配置项根据api加入
      options: {
        url: "http://117.25.222.4:6534/pss/l_a9e3a2c47e68404ce7ae221ba7d8e014.flv",
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.video {
  width: 700px;
  height: 400px;
}
</style>

播放器api

liveplayer

 /**
   * @description livePlayer实现的播放器
   * @props   
   *    @params option 配置video参数
   *            @value url 视频流地址 String default ''
   *            @value video-title 视频右上角显示的标题 String default '' 
   *            @value poster 视频封面图片 String default ''
   *            @value autoplay 自动播放 Boolean default true 
   *            @value controls 显示播放器控制栏 Boolean default true
   *            @value loop 是否循环播放 Boolean default false
   *            @value live 是否直播, 标识要不要显示进度条 Boolean default false
   *            @value alt 视频流地址没有指定情况下, 视频所在区域显示的文字, 相当于 html img 标签的 alt 属性 String default '无信号'
   *            @value muted 是否静音 Boolean default false 
   *            @value aspect 视频显示区域的宽高比, fullscreen 即是全屏展示 String default '16:9'
   *            @value loading 指示加载状态, 支持 sync 修饰符 
   *            @value fluent 流畅模式, Boolean default true
   *            @value stretch 是否拉伸, Boolean default false 
   *            @value timeout  m3u8 加载超时(秒) Number default 20 
   *            @value showCustomButton 是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准), Boolean default true 
   *            @value hideBigPlayButton 是否隐藏起播状态下的大播放按钮, Boolean default false
   *            @value hideSnapshotButton 是否隐藏 快照 按钮, Boolean default false 
   *            @value hideFullscreenButton 是否隐藏 全屏 按钮, Boolean default false 
   *            @value hideFluentButton 是否隐藏 极速/流畅 按钮, Boolean default false 
   *            @value hideStretchButton 是否隐藏 拉伸/标准 按钮, Boolean default false 
   *            @value resolution 供选择的清晰度配置 String 如 "yh,fhd,hd,sd" ( 说明：yh:原始分辨率，fhd:超清，hd:高清，sd:标清,不配置则不启用,需要提供多清晰度源，比如原画源是test.m3u8，则hd源即为test_hd.m3u8 )
   *            @value resolutiondefault 默认播放的清晰度 String "hd"
   *            @value playbackRates 倍速列表, Array default [0.5, 1, 2, 3]
   *            @value playbackRate 默认倍速, Number default 1
   *            @value hasaudio HTTP-FLV播放时使用:是否有音频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断 
   *            @value hasvideo HTTP-FLV播放时使用:是否有视频，传递该属性用于处理只有音频或只有视频的源 Boolean，默认不配置自动判断 
   * @method 
   *  API:reloadVideo(url) // 换地址重新加载
   *     更改视频可以通过改变option的url或者reloadVideo(url)
   *    play 播放
   *    pause 暂停
   *    paused 获取暂停状态
   *    getCurrentTime 获取当前播放时间进度, 同步返回播放时间进度数据
   *    setCurrentTime 设置当前播放时间进度, 即 seek
   *    snap 外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event
   *    getMuted 获取静音状态
   *    setMuted 设置静音状态
   *    isFullscreen 获取全屏状态
   *    requestFullscreen 触发全屏, 需要放置到交互事件回调中调用
   *    exitFullscreen 退出全屏, 需要放置到交互事件回调中调用
   *    toggleFullscreen 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏
   *    getVolume 获取音量
   *    setVolume 设置音量, 0~1

    事件(Event)
   * @props   
   *    message m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}
   *    error 播放器出错回调, 参数: Error Object
   *    ended 播放结束, 参数: 无
   *    timeupdate 进度更新, 参数: 当前时间进度
   *    pause 暂停, 参数: 当前时间进度
   *    play 播放, 参数: 当前时间进度
   *    fullscreenchange 全屏状态改变, 参数：无
   *    snapOutside 外部快照回调, 参数: 快照 Base64 数据
   *    snapInside 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据
   */

jessibuca

 /**
   * @description jessibuca播放器
   * @props   
   *    @params option 配置video参数
   *            @value url 播放的视频流
   *            @value videoBuffer 设置最大缓冲时长，单位毫秒，播放器会自动消除延迟
   *            @value forceNoOffscreen 是否不使用离屏模式（提升渲染能力）
   *            @value hiddenAutoPause 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
   *            @value hasaudio 是否有音频，如果设置false，则不对音频数据解码，提升性能。
   *            @value rotate 设置旋转角度，只支持，0(默认) ，180，270 三个值。
   *            @value isResize 当为true的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。
   *                            当为false的时候：视频画面完全填充canvas区域,画面会被拉伸。
   *            @value isFullSize 当为true的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显									示不全。
   *            @value isFlv 当为true的时候：ws协议不检验是否以.flv为依据，进行协议解析。
   *            @value debug 是否开启控制台调试打印
   *            @value timeout 设置超时时长, 单位秒
   *                           在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
   *            @value supportDblclickFullscreen 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
   *            @value showBandwidth 是否显示网速
   *            @value hideFullscreenButton 是否隐藏全屏按钮
   *            @value hideSnapshotButton 是否隐藏截图按钮
   *            @value playBtn 是否显示播放暂停按钮
   *            @value audioBtn 是否显示声音按钮
   *            @value keepScreenOn 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
   *            @value isNotMute 是否开启声音，默认是关闭声音播放的。
   *            @value loadingText 加载过程中文案。
   *            @value background 背景图片。
   * @method 
   *  API:reloadVideo(url) // 换地址重新加载
        	更改视频可以通过改变option的url或者reloadVideo(url)
   *      destoryVideo() 关闭视频，释放底层资源 
   *      closeVideo() 关闭视频,不释放底层资源
   *      clearView() 清理画布为黑色背景
   *      resize() 重新调整视图大小
   *      rotateChange(deg) 设置旋转角度，只支持，0(默认) ，180，270 三个值。
   *                     可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。
   *      hasLoaded() 返回是否加载完毕
   *      screenshot(filename, format, quality,type) 截图，调用后弹出下载框保存截图
   *          filename: 可选参数, 保存的文件名, 默认 时间戳
   *          format : 可选参数, 截图的格式，可选png或jpeg或者webp ,默认 png
   *          quality: 可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 0.92
   *          type: 可选参数, 可选download或者base64或者blob，默认download
   * 
   *  事件: error(data) 错误信息
   *        play() 播放
   *        pause() 暂停
   *        timeUpdate(data) 视频播放持续时间，单位ms
   */