npm-test-ower
v0.2.14
Published
## 安装
Downloads
40
Readme
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
*/