Go 文档官网Appearance
VideoFull
全屏视频组件。
功能
- 微信、IOS 新闻客户端、网易云音乐视频自动播放；
- 不能自动播放的平台，可以自定义播放研究，引导点击播放；
使用
<VideoFull :src="src" :poster="poster" @ended="ended" />
import { VideoFull } from '@go/ui';
export default defineComponent({
components: {
VideoFull,
},
data(){
return {
src: '',
poster: '',
}
},
methods:{
ended(){
// 视频播放完成
},
}
})
接口
autoplay <Boolean>: 自动播放 默认：true；src <string>: video url；poster <string>: video 预加载图片；
方法
play(): video 播放；pause(): video 暂停；
回调方法
ended <function>: video 结束回调；play <function>: video 播放回调；pause <function>: video 暂停回调；timeupdate <function>: video 监听；arg[0]: 当前时间；arg[1]: 上一帧时间；
示例
<template>
<VideoFull ref="videoFull" :src="video" :poster="poster" @ended="videoEnd" @timeupdate="videoUpdate"/>
</template>
<script lang="ts">
import { VideoFull } from '@go/ui';
export default defineComponent({
components: {
VideoFull,
},
data(){
return {
src: '',
poster: '',
}
},
methods:{
ended(){
// 视频播放完成
},
videoUpdate(current, old){
// 暂停例子，想要在100ms暂停
if(current >= 100&& old < 100){
this.$refs.videoFull.pause();
}
}
}
})
</script>
自定样式
:deep(.video-full){
.video{
}
.video-poster {
.play-icon{
width: 180rpx;
height: 180rpx;
background: url(https://go.163.com/f2e/common/assets/icon_play.png);
background-size: contain;
}
}
}