yichael_intomovie/uni_modules/xt-video

xt-video一款简单好用的视频播放器组件

简介

当前仅支持H5版本，后续会不断更新迭代。如果有什么需求，可在评论区留言。发布该版本主要是为了公司项目使用。

基本用法

<template>
	<view class="index">
		<xt-video
			video-id="video"
			src="xxx"
			poster="xxx"
		/>
	</view>
</template>

props

属性名	类型	默认值	说明
videoId	String		必填，视频唯一id
width	String	100%	视频宽度，默认100%
height	String	400rpx	视频高度，默认422rpx
src	String		视频播放地址
poster	String		视频封面
autoplay	Boolean	false	是否自动播放，默认false，由于浏览器限制，如果想要自动播放时，muted也要设置为true
loop	Boolean	false	是否循环播放视频
muted	Boolean	false	是否静音播放
initialTime	Number	0	指定视频初始播放位置，单位秒（s）
duration	Number		指定视频总时长，单位秒（s）
activeColor	String	#03A3F8	进度条选中颜色
title	String		视频标题
customFullscreen	Boolean	false	是否自定义视频全屏功能
ratios	Array	[]	多分辨率视频播放数组，对象数组内容详见下方
ratioDefaultId	[String, Number]	null	设置默认播放的分辨率id，如果设置了该属性，则src属性必须为对应分辨率id的视频地址
episodes	Array	null	选集数组，对象数组内容详见下方
epiDefaultId	[String, Number]	null	设置默认播放第几集，在设置默认播放src时，也需要设置默认播放第几集的id
vipBgColor	String	#FF5345	设置集数时，vip标签的背景色
vipFontColor	String	#FFFFFF	设置集数时，vip标签的文字颜色
navHeight	Number	44，单位px	上导航的高度，用于视频全屏时，如果存在导航栏，导致选集弹框展示不全问题
showSpeed	Boolean	false	是否显示倍速播放按钮
speeds	Array	具体数组见下方	设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5。微信基础库2.6.3 起支持 2.0 倍速

属性speeds数组的默认值

[
	{ rate: 0.5, name: '0.5x' },
	{ rate: 0.8, name: '0.8x' },
	{ rate: 1.0, name: '1.0x' },
	{ rate: 1.25, name: '1.25x' },
	{ rate: 1.5, name: '1.5x' },
	{ rate: 2.0, name: '2.0x' }
]

属性ratios为一个对象数组，其有效值如下：

属性名	类型	默认值	说明
id	[String, Number]		必填，分辨率的唯一id
url	String		不同分辨率的视频地址
name	String		必填，分辨率名称，例如：标清

属性episodes为一个对象数组，其有效值如下：

属性名	类型	默认值	说明
id	[String, Number]		必填，集数的唯一id
url	String		不同集数的视频地址
name	String		必填，集数名称，例如：1/第一集等
isVip	String		是否是vip

注意：

分辨率和集数的url都不是必填项，根据你们后端提供的视频地址来自己确定即可。有可能需要前端自己拼写不同分辨率，不同集数的视频地址。

事件

事件名	类型	说明
@onFullscreen	Function	customFullscreen为true时生效，自定义全屏事件，返回Boolean，是否全屏
@onExitFullscreen	Function	customFullscreen为true时生效，自定义退出全屏事件，返回Boolean，是否全屏
@onChangeRatio	Function	切换分辨率时的回调，返回当前分辨率对象
@onChangeEpi	Function	切换集数时的回调，返回当前第几集对象

方法，通过$refs进行调用

方法名	说明	参数
xtVideoReload	改变视频地址后，重新加载视频	接收一个对象，对象属性{url: String,要切换的视频地址， startTime: Number,视频播放的初始时间}均为非必填

示例代码：

<template>
	<view class="index">
		<xt-video
			ref="xtVideoRef"
			video-id="video"
			src="xxx"
			poster="xxx"
			:episodes="episodes"
			:ratios="ratios"
			@onChangeRatio="handleChangeRatio"
			@onChangeEpi="handleChangeEpi"
		/>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ratios: [
				{ 
					id: '480p',
					url: 'xxx.mp4',
					name: '标清'
				},
				{
					id: '720p',
					url: 'xxx1.mp4',
					name: '高清'
				},
				{
					id: '1080p',
					url: 'xxx2.mp4',
					name: '超清'
				}
			],
			episodes: [
				{
					id: '1',
					url: 'xxx.mp4',
					name: '1',
					isVip: false
				},
				{
					id: '2',
					url: 'xxx.mp4',
					name: '2',
					isVip: false
				},
				{
					id: '3',
					url: 'xxx.mp4',
					name: '3',
					isVip: true
				}
			]
		},
		methods: {
			// 自定义切换分辨率方法
			handleChangeRatio(item) {
				this.$refs.xtVideoRef.xtVideoReload({
					url: item.url
				})
			},
			// 自定义切换集数方法
			handleChangeEpi(item) {
				this.$refs.xtVideoRef.xtVideoReload({
					url: item.url,
					startTime: 0
				})
			}
		}
	}
}
</script>