Skip to content

H
hello uni-app x

clarck520 / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a4d9ff8f 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng
浏览文件
操作

更新video示例

上级 14a8d414
隐藏空白更改
内联 并排
Showing with 393 addition and 428 deletion
pages.json
浏览文件 @ a4d9ff8f
......@@ -158,12 +158,6 @@
"navigationBarTitleText": "video"
}
},
{
"path": "pages/component/video/video-all",
"style": {
"navigationBarTitleText": "video-all"
}
},
{
"path": "pages/component/video/video-format",
"style": {
......
pages/component/video/video-all.uvue 已删除 100644 → 0
浏览文件 @ 14a8d414
<template>
<view class="uni-flex-item">
<video class="video" ref="video" id="video" :header="header" :src=src :autoplay="autoplay" :loop="loop"
:muted="muted" :initial-time="initialTime" :duration="duration" :controls="controls" :danmu-btn="danmuBtn"
:enable-danmu="enableDanmu" :page-gesture="pageGesture" :direction="direction" :show-progress="showProgress"
:show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn" :show-center-play-btn="showCenterPlayBtn"
:show-loading="showLoading" :enable-progress-gesture="enableProgressGesture" :object-fit="objectFit"
:poster="poster" :show-mute-btn="showMuteBtn" :title="title" :enable-play-gesture="enablePlayGesture"
:vslide-gesture="vslideGesture" :vslide-gesture-in-fullscreen="vslideGestureInFullscreen" :codec="codec"
:http-cache="httpCache" :play-strategy="playStrategy" :danmu-list="danmuList" @play="onPlay" @pause="onPause"
@ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @error="onError" @progress="onProgress"
@fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle" @fullscreenchange="onFullScreenChange">
</video>
<scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
<view class="uni-title">
<text class="uni-title-text">API示例</text>
</View>
<view class="uni-btn-v">
<button type="primary" @click="play">播放</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="pause">暂停</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="seek(pos)">跳转到指定位置</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="requestFullScreen(requestFullScreenOptions)">进入全屏</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="exitFullScreen">退出全屏</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="stop">停止</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="sendDanmu(danmu)">发送弹幕</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="playbackRate(rate)">设置倍速</button>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setSrc(_src)">设置播放资源</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setAutoplay()">设置是否自动播放（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setLoop()">设置是否循环播放（本次播放完成后生效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setMuted()">设置是否静音播放</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setInitialTime(_initialTime)">设置初始播放位置（本次播放完成后生效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDuration(_duration)">设置视频时长（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setControls()">设置是否显示默认播放控件</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDanmuBtn()">设置是否显示弹幕按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPageGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDirection(_direction)">设置全屏时视频的方向</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowProgress()">设置是否显示进度条</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowFullscreenBtn()">设置是否显示全屏按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowPlayBtn()">设置是否显示视频底部控制栏的播放按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowCenterPlayBtn()">设置是否显示视频中间的播放按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowLoading()">设置是否显示loading控件</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setEnableProgressGesture()">设置是否开启控制进度的手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setObjectFit(_objectFit)">设置视频大小与video容器大小不一致时，视频的表现形式</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPoster(_poster)">设置视频封面</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowMuteBtn()">设置是否显示静音按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setTitle(_title)">设置视频标题</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setEnablePlayGesture()">设置是否开启播放手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setVslideGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setVslideGestureInFullscreen()">全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setCodec(_codec)">设置解码器（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setHttpCache()">设置是否对http、https视频源开启本地缓存（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPlayStrategy(_playStrategy)">设置播放策略（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setHeader(_header)">设置header</button>
</view>
</scroll-view>
</view>
</template>
<script lang="uts">
export default {
onReady() {
this.videoContext = uni.createVideoContext('video', this);
},
data() {
return {
videoContext: null as VideoContext | null,
// 属性
src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
_src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
autoplay: false,
loop: false,
muted: false,
initialTime: 0,
_initialTime: 6,
duration: -1,
_duration: 60,
controls: true,
danmuList: [{
text: '要显示的文本',
color: '#FF0000',
time: 3
}, {
text: '要显示的文本2',
color: '#31ff23',
time: 5
}, {
text: '要显示的文本3',
color: '#f13ef8',
time: 7
}, {
text: '要显示的文本4',
color: '#4972f8',
time: 9
}, {
text: '要显示的文本5',
color: '#000000',
time: 11
}] as Array<Danmu>,
danmuBtn: false,
enableDanmu: true,
pageGesture: false,
direction: -90,
_direction: 0,
requestFullScreenOptions: {
direction: -90
} as RequestFullScreenOptions,
showProgress: true,
showFullscreenBtn: true,
showPlayBtn: true,
showCenterPlayBtn: true,
showLoading: true,
enableProgressGesture: true,
objectFit: "contain",
_objectFit: "fill",
poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
showMuteBtn: false,
title: "video-component",
_title: "video-component video-component",
enablePlayGesture: false,
vslideGesture: false,
vslideGestureInFullscreen: true,
codec: "hardware",
_codec: "software",
httpCache: true,
playStrategy: 0,
_playStrategy: 2,
header: {
'User-Agent': 'header test'
} as UTSJSONObject,
_header: {
'User-Agent': 'header test2'
} as UTSJSONObject,
// API
pos: 10,
rate: 1.5,
danmu: {
text: '要显示的文本',
color: '#FF0000'
} as Danmu,
// 自动化测试
isPlaying: false,
isPause: false,
isFullScreen: false
}
},
methods: {
// API
play: function () {
console.log("play");
this.videoContext?.play();
},
pause: function () {
console.log("pause");
(uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
// this.videoContext?.pause();
},
seek: function (pos : number) {
console.log("seek -> " + pos);
this.videoContext?.seek(pos);
},
requestFullScreen: function (options : RequestFullScreenOptions | null) {
console.log("requestFullScreen -> " + options);
this.videoContext?.requestFullScreen(options);
},
exitFullScreen: function () {
console.log("exitFullScreen");
this.videoContext?.exitFullScreen();
},
stop: function () {
console.log("stop");
uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
// this.videoContext?.stop();
},
sendDanmu: function (danmu : Danmu) {
console.log("sendDanmu -> " + danmu);
this.videoContext?.sendDanmu(danmu);
},
playbackRate: function (rate : number) {
console.log("playbackRate -> " + rate);
this.videoContext?.playbackRate(rate);
},
// 属性
setSrc: function (src : string) {
this.src = src;
console.log("src -> " + this.src)
},
setAutoplay: function () {
this.autoplay = !this.autoplay;
console.log("autoplay -> " + this.autoplay)
},
setLoop: function () {
this.loop = !this.loop;
console.log("loop -> " + this.loop)
},
setMuted: function () {
this.muted = !this.muted;
console.log("muted -> " + this.muted)
},
setInitialTime: function (initialTime : number) {
this.initialTime = initialTime;
console.log("initialTime -> " + this.initialTime)
},
setDuration: function (duration : number) {
this.duration = duration;
console.log("duration -> " + this.duration)
},
setControls: function () {
this.controls = !this.controls;
console.log("controls -> " + this.controls)
},
setDanmuBtn: function () {
this.danmuBtn = !this.danmuBtn;
console.log("danmuBtn -> " + this.danmuBtn)
},
setPageGesture: function () {
this.pageGesture = !this.pageGesture;
console.log("pageGesture -> " + this.pageGesture)
},
setDirection: function (direction : number) {
this.direction = direction;
console.log("direction -> " + this.direction)
},
setShowProgress: function () {
this.showProgress = !this.showProgress;
console.log("showProgress -> " + this.showProgress)
},
setShowFullscreenBtn: function () {
this.showFullscreenBtn = !this.showFullscreenBtn;
console.log("showFullscreenBtn -> " + this.showFullscreenBtn)
},
setShowPlayBtn: function () {
this.showPlayBtn = !this.showPlayBtn;
console.log("showPlayBtn -> " + this.showPlayBtn)
},
setShowCenterPlayBtn: function () {
this.showCenterPlayBtn = !this.showCenterPlayBtn;
console.log("showCenterPlayBtn -> " + this.showCenterPlayBtn)
},
setShowLoading: function () {
this.showLoading = !this.showLoading;
console.log("showLoading -> " + this.showLoading)
},
setEnableProgressGesture: function () {
this.enableProgressGesture = !this.enableProgressGesture;
console.log("enableProgressGesture -> " + this.enableProgressGesture)
},
setObjectFit: function (objectFit : string) {
this.objectFit = objectFit;
console.log("objectFit -> " + this.objectFit)
},
setPoster: function (poster : string) {
this.poster = poster;
console.log("poster -> " + this.poster)
},
setShowMuteBtn: function () {
this.showMuteBtn = !this.showMuteBtn;
console.log("showMuteBtn -> " + this.showMuteBtn)
},
setTitle: function (title : string) {
this.title = title;
console.log("title -> " + this.title)
},
setEnablePlayGesture: function () {
this.enablePlayGesture = !this.enablePlayGesture;
console.log("enablePlayGesture -> " + this.enablePlayGesture)
},
setVslideGesture: function () {
this.vslideGesture = !this.vslideGesture;
console.log("vslideGesture -> " + this.vslideGesture)
},
setVslideGestureInFullscreen: function () {
this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;
console.log("vslideGestureInFullscreen -> " + this.vslideGestureInFullscreen)
},
setCodec: function (codec : string) {
this.codec = codec;
console.log("codec -> " + this.codec)
},
setHttpCache: function () {
this.httpCache = !this.httpCache;
console.log("httpCache -> " + this.httpCache)
},
setPlayStrategy: function (playStrategy : number) {
this.playStrategy = playStrategy;
console.log("playStrategy -> " + this.playStrategy)
},
setHeader: function (header : UTSJSONObject) {
this.header = header;
console.log("header -> " + this.header)
},
// 事件
onPlay: function (res : Event) {
console.log(res.type);
this.isPlaying = true;
this.isPause = false;
},
onPause: function (res : Event) {
console.log(res.type);
this.isPlaying = false;
this.isPause = true;
},
onEnded: function (res : Event) {
console.log(res.type);
},
onTimeUpdate: function (res : VideoTimeUpdateEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onFullScreenChange: function (res : VideoFullScreenChangeEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
this.isFullScreen = !this.isFullScreen;
},
onWaiting: function (res : Event) {
console.log(res.type);
},
onError: function (res : VideoErrorEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onProgress: function (res : VideoProgressEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onFullScreenClick: function (res : VideoFullScreenClickEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onControlsToggle: function (res : VideoControlsToggleEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
}
}
}
</script>
<style>
.video {
width: 750rpx;
height: 400rpx;
}
</style>
pages/component/video/video.test.js
浏览文件 @ a4d9ff8f
......@@ -4,7 +4,7 @@ describe('component-native-video', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/component/video/video-all');
page = await program.reLaunch('/pages/component/video/video');
await page.waitFor('video');
});
......
pages/component/video/video.uvue
浏览文件 @ a4d9ff8f
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-flex-item">
<video class="video" ref="video" id="video" :header="header" :src=src :autoplay="autoplay" :loop="loop"
:muted="muted" :initial-time="initialTime" :duration="duration" :controls="controls" :danmu-btn="danmuBtn"
:enable-danmu="enableDanmu" :page-gesture="pageGesture" :direction="direction" :show-progress="showProgress"
:show-fullscreen-btn="showFullscreenBtn" :show-play-btn="showPlayBtn" :show-center-play-btn="showCenterPlayBtn"
:show-loading="showLoading" :enable-progress-gesture="enableProgressGesture" :object-fit="objectFit"
:poster="poster" :show-mute-btn="showMuteBtn" :title="title" :enable-play-gesture="enablePlayGesture"
:vslide-gesture="vslideGesture" :vslide-gesture-in-fullscreen="vslideGestureInFullscreen" :codec="codec"
:http-cache="httpCache" :play-strategy="playStrategy" :danmu-list="danmuList" @play="onPlay" @pause="onPause"
@ended="onEnded" @timeupdate="onTimeUpdate" @waiting="onWaiting" @error="onError" @progress="onProgress"
@fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle" @fullscreenchange="onFullScreenChange">
</video>
<scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
<view class="uni-btn-v">
<navigator url="/pages/component/video/video-all">
<button type="primary">视频组件全示例</button>
<navigator url="/pages/component/video/video-format">
<button type="primary">视频格式示例</button>
</navigator>
</view>
<view class="uni-title">
<text class="uni-title-text">API示例</text>
</View>
<view class="uni-btn-v">
<navigator url="/pages/component/video/video-format">
<button type="primary">视频组件格式示例</button>
</navigator>
<button type="primary" @click="play">播放</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="pause">暂停</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="seek(pos)">跳转到指定位置</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="requestFullScreen(requestFullScreenOptions)">进入全屏</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="exitFullScreen">退出全屏</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="stop">停止</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="sendDanmu(danmu)">发送弹幕</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="playbackRate(rate)">设置倍速</button>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setSrc(_src)">设置播放资源</button>
</view>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setAutoplay()">设置是否自动播放（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setLoop()">设置是否循环播放（本次播放完成后生效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setMuted()">设置是否静音播放</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setInitialTime(_initialTime)">设置初始播放位置（本次播放完成后生效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDuration(_duration)">设置视频时长（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setControls()">设置是否显示默认播放控件</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDanmuBtn()">设置是否显示弹幕按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPageGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDirection(_direction)">设置全屏时视频的方向</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowProgress()">设置是否显示进度条</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowFullscreenBtn()">设置是否显示全屏按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowPlayBtn()">设置是否显示视频底部控制栏的播放按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowCenterPlayBtn()">设置是否显示视频中间的播放按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowLoading()">设置是否显示loading控件</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setEnableProgressGesture()">设置是否开启控制进度的手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setObjectFit(_objectFit)">设置视频大小与video容器大小不一致时，视频的表现形式</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPoster(_poster)">设置视频封面</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowMuteBtn()">设置是否显示静音按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setTitle(_title)">设置视频标题</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setEnablePlayGesture()">设置是否开启播放手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setVslideGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setVslideGestureInFullscreen()">全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setCodec(_codec)">设置解码器（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setHttpCache()">设置是否对http、https视频源开启本地缓存（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPlayStrategy(_playStrategy)">设置播放策略（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setHeader(_header)">设置header</button>
</view>
</scroll-view>
</view>
</template>
<script>
<script lang="uts">
export default {
onReady() {
this.videoContext = uni.createVideoContext('video', this);
},
data() {
return {
title: 'video'
videoContext: null as VideoContext | null,
// 属性
src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
_src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
autoplay: false,
loop: false,
muted: false,
initialTime: 0,
_initialTime: 6,
duration: -1,
_duration: 60,
controls: true,
danmuList: [{
text: '要显示的文本',
color: '#FF0000',
time: 3
}, {
text: '要显示的文本2',
color: '#31ff23',
time: 5
}, {
text: '要显示的文本3',
color: '#f13ef8',
time: 7
}, {
text: '要显示的文本4',
color: '#4972f8',
time: 9
}, {
text: '要显示的文本5',
color: '#000000',
time: 11
}] as Array<Danmu>,
danmuBtn: false,
enableDanmu: true,
pageGesture: false,
direction: -90,
_direction: 0,
requestFullScreenOptions: {
direction: -90
} as RequestFullScreenOptions,
showProgress: true,
showFullscreenBtn: true,
showPlayBtn: true,
showCenterPlayBtn: true,
showLoading: true,
enableProgressGesture: true,
objectFit: "contain",
_objectFit: "fill",
poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
showMuteBtn: false,
title: "video-component",
_title: "video-component video-component",
enablePlayGesture: false,
vslideGesture: false,
vslideGestureInFullscreen: true,
codec: "hardware",
_codec: "software",
httpCache: true,
playStrategy: 0,
_playStrategy: 2,
header: {
'User-Agent': 'header test'
} as UTSJSONObject,
_header: {
'User-Agent': 'header test2'
} as UTSJSONObject,
// API
pos: 10,
rate: 1.5,
danmu: {
text: '要显示的文本',
color: '#FF0000'
} as Danmu,
// 自动化测试
isPlaying: false,
isPause: false,
isFullScreen: false
}
},
methods: {
// API
play: function () {
console.log("play");
this.videoContext?.play();
},
pause: function () {
console.log("pause");
(uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
// this.videoContext?.pause();
},
seek: function (pos : number) {
console.log("seek -> " + pos);
this.videoContext?.seek(pos);
},
requestFullScreen: function (options : RequestFullScreenOptions | null) {
console.log("requestFullScreen -> " + options);
this.videoContext?.requestFullScreen(options);
},
exitFullScreen: function () {
console.log("exitFullScreen");
this.videoContext?.exitFullScreen();
},
stop: function () {
console.log("stop");
uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
// this.videoContext?.stop();
},
sendDanmu: function (danmu : Danmu) {
console.log("sendDanmu -> " + danmu);
this.videoContext?.sendDanmu(danmu);
},
playbackRate: function (rate : number) {
console.log("playbackRate -> " + rate);
this.videoContext?.playbackRate(rate);
},
// 属性
setSrc: function (src : string) {
this.src = src;
console.log("src -> " + this.src)
},
setAutoplay: function () {
this.autoplay = !this.autoplay;
console.log("autoplay -> " + this.autoplay)
},
setLoop: function () {
this.loop = !this.loop;
console.log("loop -> " + this.loop)
},
setMuted: function () {
this.muted = !this.muted;
console.log("muted -> " + this.muted)
},
setInitialTime: function (initialTime : number) {
this.initialTime = initialTime;
console.log("initialTime -> " + this.initialTime)
},
setDuration: function (duration : number) {
this.duration = duration;
console.log("duration -> " + this.duration)
},
setControls: function () {
this.controls = !this.controls;
console.log("controls -> " + this.controls)
},
setDanmuBtn: function () {
this.danmuBtn = !this.danmuBtn;
console.log("danmuBtn -> " + this.danmuBtn)
},
setPageGesture: function () {
this.pageGesture = !this.pageGesture;
console.log("pageGesture -> " + this.pageGesture)
},
setDirection: function (direction : number) {
this.direction = direction;
console.log("direction -> " + this.direction)
},
setShowProgress: function () {
this.showProgress = !this.showProgress;
console.log("showProgress -> " + this.showProgress)
},
setShowFullscreenBtn: function () {
this.showFullscreenBtn = !this.showFullscreenBtn;
console.log("showFullscreenBtn -> " + this.showFullscreenBtn)
},
setShowPlayBtn: function () {
this.showPlayBtn = !this.showPlayBtn;
console.log("showPlayBtn -> " + this.showPlayBtn)
},
setShowCenterPlayBtn: function () {
this.showCenterPlayBtn = !this.showCenterPlayBtn;
console.log("showCenterPlayBtn -> " + this.showCenterPlayBtn)
},
setShowLoading: function () {
this.showLoading = !this.showLoading;
console.log("showLoading -> " + this.showLoading)
},
setEnableProgressGesture: function () {
this.enableProgressGesture = !this.enableProgressGesture;
console.log("enableProgressGesture -> " + this.enableProgressGesture)
},
setObjectFit: function (objectFit : string) {
this.objectFit = objectFit;
console.log("objectFit -> " + this.objectFit)
},
setPoster: function (poster : string) {
this.poster = poster;
console.log("poster -> " + this.poster)
},
setShowMuteBtn: function () {
this.showMuteBtn = !this.showMuteBtn;
console.log("showMuteBtn -> " + this.showMuteBtn)
},
setTitle: function (title : string) {
this.title = title;
console.log("title -> " + this.title)
},
setEnablePlayGesture: function () {
this.enablePlayGesture = !this.enablePlayGesture;
console.log("enablePlayGesture -> " + this.enablePlayGesture)
},
setVslideGesture: function () {
this.vslideGesture = !this.vslideGesture;
console.log("vslideGesture -> " + this.vslideGesture)
},
setVslideGestureInFullscreen: function () {
this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;
console.log("vslideGestureInFullscreen -> " + this.vslideGestureInFullscreen)
},
setCodec: function (codec : string) {
this.codec = codec;
console.log("codec -> " + this.codec)
},
setHttpCache: function () {
this.httpCache = !this.httpCache;
console.log("httpCache -> " + this.httpCache)
},
setPlayStrategy: function (playStrategy : number) {
this.playStrategy = playStrategy;
console.log("playStrategy -> " + this.playStrategy)
},
setHeader: function (header : UTSJSONObject) {
this.header = header;
console.log("header -> " + this.header)
},
// 事件
onPlay: function (res : Event) {
console.log(res.type);
this.isPlaying = true;
this.isPause = false;
},
onPause: function (res : Event) {
console.log(res.type);
this.isPlaying = false;
this.isPause = true;
},
onEnded: function (res : Event) {
console.log(res.type);
},
onTimeUpdate: function (res : VideoTimeUpdateEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onFullScreenChange: function (res : VideoFullScreenChangeEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
this.isFullScreen = !this.isFullScreen;
},
onWaiting: function (res : Event) {
console.log(res.type);
},
onError: function (res : VideoErrorEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onProgress: function (res : VideoProgressEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onFullScreenClick: function (res : VideoFullScreenClickEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onControlsToggle: function (res : VideoControlsToggleEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
}
}
}
</script>
<style>
.video {
width: 750rpx;
height: 400rpx;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或