JSVideoController

简介

建议用真机执行该项目，模拟器加载网络视频速度较慢；部分功能API 6才能使用。

该项目是一款播放器控制页面应用，底层播放器现采用鸿蒙JS原生video，上层采用自定义的布局，生成部分场景的控制页面，可实现主流视频应用的部分功能，如播放、全屏、选集、倍速等功能。

如上图，底层采用原生video播放器，上层为三个不同的页面，根据播放器的视频播放状态，切换上层页面，上层页面可实现一些拓展功能，如选集、切换清晰度等，也可实现常见功能，如播放、暂停、重播、拖动进度条等，对于常见功能，执行操作时会将行为回调给video，执行video相应操作，如在视频播放时点击暂停按钮，通过回调执行video的pause()方法暂停播放。

详细流程

video通过传入的路径加载视频资源，可以是本地视频，也可以是网络视频。

加载中页面loadingController：可显示加载中动画；可显示实时网速。

播放控制页playingController：可对视频进行一系列操作，如播放/暂停、全屏、选集、调节播放速度，除播放/暂停、全屏按钮外，其他所有按钮均在全屏横屏状态下才显示，且均可隐藏，用户可自定义按钮的组合；所有按钮都有默认图标，也可由用户传入图标资源替换；点击选集、调节播放速度可以弹出选择列表，列表数据由用户传入，此项目只是作为页面展示；此外，底部左右两侧还提供了自定义按钮，用户可根据所需实现按钮的功能。

播放完成页replayController：可进行视频重复播放，下侧有推荐列表，可由用户传入视频列表进行展示。

页面展示

加载页面

用法说明

属性

playingController

属性	类型	默认值	描述
isPageShow	boolean	true	设置页面是否显示，true：可见，false：隐藏
playState	number	-1	视频播放状态，可选值有： const.VIDEO_STATE.PREPARING：准备中； const.VIDEO_STATE.PREPARED：准备完成； const.VIDEO_STATE.START：播放开始； const.VIDEO_STATE.PAUSE：暂停； const.VIDEO_STATE.FINISH：播放完成； const.VIDEO_STATE.ERROR：错误。
imgBackSrc	string	'/common/images/image-back.png'	设置左上角返回按钮图片资源
title	string	'Title'	设置标题
isBatteryShow	boolean	true	设置右上方电量是否可见，true：可见，false：隐藏
isTimeShow	boolean	true	设置右上方时间是否可见，true：可见，false：隐藏
imgPlaySrc	Array	['/common/images/play.svg', '/common/images/pause.svg']	设置播放按钮图片资源，传入一个长度为2的string数组，第一个为播放按钮资源，第二个为暂停按钮资源
fullScreenSrc	Array	['/common/images/full-screen.svg', '/common/images/cancel-full-screen.svg']	设置全屏按钮图片资源，传入一个长度为2的string数组，第一个为进入全屏按钮资源，第二个为退出全屏按钮资源
isHorizontal	boolean	false	当前视频是否为横屏，true：横屏，false：竖屏
isQualityShow	boolean	true	设置清晰度按钮是否可见，true：可见，false：隐藏
isSetsShow	boolean	true	设置选集按钮是否可见，true：可见，false：隐藏
currentValue	number	0	当前播放时间总数，单位：秒
duration	number	0	视频时长总数，单位：秒
leftButtonList	Array	-	自定义左侧按钮文字资源
rightButtonList	Array	-	自定义右侧按钮文字资源
qualityList	Array	-	视频清晰度选择列表数据
speedList	Array	-	播放速度选择列表数据
choiceEpisodeList	Array	-	选集列表数据
quality	string	'自动'	右下方清晰度按钮文字，根据选择后自动切换
speed	string	'倍速'	右下方播放速度按钮文字，根据选择后自动切换
choiceEpisodeTitle	string	-	选集弹出列表标题

其中，leftButtonList、rightButtonList代码示例：value：按钮文本文字

[{
	"value": "1"
},
{
	"value": "2"
}]

qualityList代码示例：text：文本文字；color：字体颜色

[{
	"text": "蓝光1080P",
	"color": "#FFFFFF"
},
{
	"text": "高清720P",
	"color": "#FFFFFF"
}]

speedList代码示例：text：文字文本，数字类型为float；color：文字颜色

[{
	"text": "0.75X",
	"color": "#FFFFFF"
},
{
	"text": "1.0X",
	"color": "#80CD6600"
}]

choiceEpisodeList代码示例：text：文字文本，建议直接放集数，选择后返回text；color：文字颜色

[{
	"text": 1,
	"color": "#30CFCFCF"
},
{
	"text": 2,
	"color": "#30CFCFCF"
}]

replayController

属性	类型	默认值	描述
replayImage	string	'common/images/replay.png'	设置重播按钮图片资源
isHorizontal	boolean	false	是否横屏，true：横屏，false：竖屏
listData	Array	-	推荐列表数据
isShow	boolean	true	设置下方推荐列表是否显示，true：显示，false：隐藏

其中，listData使用示例：title：标题；image：封面图片

[{
	"title": "在小米之家群里推荐华为?",
	"image": "/common/images/video9.jpg"
},
{
	"title": "30分钟手把手教你开发一个鸿蒙版分布式点餐APP",
	"image": "/common/images/video1.jpg"
}]

事件

playingController

事件	参数	描述
@on-full-screen	-	右下角全屏按钮点击事件
@on-seeking	value：总秒数，单位：秒	进度条拖动时调用
@speed-change	value：改变后的速度，单位：string	改变播放速度时调用
@quality-change	value：选中的清晰度，单位：string	改变视频清晰度时调用
@choice-episode	tag：选中集数的文本，单位：string	改变集数时调用
@play-video	-	左下角播放/暂停按钮点击事件
@left-button-click	index：选中按钮的位置索引，单位：number	左下自定义按钮点击事件
@right-button-click	index：选中按钮的位置索引，单位：number	右下自定义按钮点击事件
@return-pre	-	左上角返回按钮点击事件

replayController

事件	参数	描述
@event-type	-	重播按钮点击事件
@list-item-click	index：点击item的下标	点击推荐列表的item时调用

待完善

loadingController中获取实时网速目前用的是随机数，鸿蒙暂无获取实时网速的api。

Math.floor(Math.random() * 400) + "Kb/s";

视频全屏还存在问题，本想调用video的全屏，但发现video的direction属性无效，设置为horizontal时，手机竖屏点击全屏按钮，视频依旧为竖屏，咨询了官方，解释是该属性API 6 才能使用，且API 6 的模拟器不一定能生效，所以现在使用的方案为根据手机宽高比来判断手机是否横屏，暂无法直接设置当前页面为横屏，导致目前能实现的效果是，手机方向竖屏，点击全屏按钮后，视频为竖屏全屏显示，当手机横屏时才能显示完整功能。
电池电量以及当前时间是通过计时器获取的，获取频率为电量60/s，时间30/s，目前鸿蒙JS暂无电量、时间改变时回调的API。
视频全屏状态下暂无法沉浸式显示，JS暂无隐藏状态栏方法，用API 6的window设置全屏状态也无效果。
拖动进度条调用的是video的setCurrentTime方法，用该方法拖动进度条有时候会回退几秒，无法拖到想要的位置。

CHINASOFT_OHOS/JSVideoController

JSVideoController

简介

页面展示

用法说明

待完善

简介

发行版

贡献者

近期动态

CHINASOFT_OHOS/JSVideoController .gitee-modal { width: 500px !important; }

JSVideoController

简介

页面展示

用法说明

待完善

简介

发行版

贡献者

近期动态

搜索帮助

CHINASOFT_OHOS/JSVideoController