Skip to content

Latest commit

 

History

History
130 lines (116 loc) · 5.1 KB

README.md

File metadata and controls

130 lines (116 loc) · 5.1 KB
Raw

YY-EVA web 🎁

npm version npm downloads bundle License github

Language: English

📦安装

npm i yyeva
# or
yarn add yyeva
# or
pnpm add yyeva

💿使用

import {yyEva,YYEvaType} from 'yyeva'
let player:YYEvaType = await yyEva({
	container,// Html Element
	videoUrl,// Video Url
	effects: {
	  // 自定义字体信息 fontStyle参考https://www.w3schools.com/jsref/canvas_font.asp
	  text1: {text: '自定义text1', fontStyle: '18px Microsoft YaHei', fontColor: '#ff0000'},
          text2: {text: '自定义text2', fontStyle: '20px Microsoft YaHei', fontColor: 'green'},
        },
	// Events
	onStart(){},
	onStop(){},
	onEnd(){},
	onLoopCount(args){},
	onPause(){},
	onResume(){},
	onProcess(){},
	onError(){},
})
player.start() // start player
player.stop() // pause player
player.destroy() // destroy player

配置

选项 作用 默认值 必填
videoUrl mp4地址 *
hevcUrl mp4地址 [hevc、h265] 不支持h265会降级到h264
loop 是否循环、循环次数 true
videoID 适配微信等需要预先声明的容器,否则需要重复点击授权
mode 显示方式 横竖屏 根据父容器等比缩放
container html对象 推荐 div *
fps 礼物播放动画帧数 根据素材获取
usePrefetch 是否边播边下载、带Key素材默认开启 true
useBitmap 利用bitmap代替 img element true
useAccurate 启用 requestVideoFrameCallback,自降级 false ，开启后在个别安卓手机可能出现卡顿现象
useVideoDBCache indexdb 缓存视频 true
useFrameCache 缓存视频帧 5
useOfsRender 利用多canvas渲染 true
mute 静音播放、根据环境自动调整 true
alphaDirection 非带Key视频，适配alpha 位置 alphaDirection
renderType 渲染模式、canvas2d 带Key模式开发中 canvas2d
resizeCanvas canvas 显示方式, 'percent' -- 铺满, 'percentW'- 横向铺满, 'percentH' - 垂直铺满, 'size'- 不缩放 width 100% height 100%
logLevel 日志级别 info
showPlayerInfo 是否控制台显示播放状态
effects 根据素材传入相应的素材内容
effects.fontColor 定义传入素材的字体颜色
effects.fontSize 定义传入素材的字体大小
checkTimeout 检查播放超时 fasle
onRequestClickPlay 微信 或者 mute=false 会触发这个事件，不定义则显示默认样式 类型 参考 clickPlayBtn

注意

  • 正式环境 确保 logLevel 为 info 避免内存泄露

兼容性

综合测试 整理了主流的手机 通过情况 详细

微信 WEB & H5

IOS 与安卓都需要设置 videoID 避免重复授权点击 如:

yyeva({
	videoID: 'yyeva_full_screen_position'
})
...
yyeva({
	videoID: 'yyeva_right_top_position'
})

IOS

微信 ios 已经验证通过，可以自动播放

兼容ios微信，需要在WeixinJSBridgeReady微信h5内置事件中，提前创建video,并且预设id

    document.addEventListener('WeixinJSBridgeReady', () => {
        window.yyeva_wx_is_ready = true //告诉 yyeva ios wchat 已经 ready
        const video = document.createElement('video')
        video.setAttribute('id', 'YYEVA_VIDEO_ID')
        document.body.appendChild(video)
        video.style.visibility = 'hidden'
    })

或者引用 yyeva 的兼容方法 实现 demo 如：

import {wechatPolyfill} from 'yyeva'
wechatPolyfill.initVideoIDPosition(['yyeva_right_top_position', 'yyeva_full_screen_position'])

安卓

微信安卓 需要手动点击 触发授权, 可根据 onRequestClickPlay 事件进行自定义 点击事件 提示

UC & 夸克

多礼物同时播放存在 卡顿问题，正在推进解决,临时解决可以通过队列错峰播放!

微信小程序

NPM 安装包