videocontext 概览
基础库 或更高版本; 支付宝客户端 10.1.32 或更高版本; 若版本较低,建议采取 兼容处理 。
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: video 组件
由 my.createvideocontext 创建,用于操作对应的 video 组件。
方法
名称 | 类型 | 兼容性 | 功能说明 |
---|---|---|---|
videocontext.play | function | - | 播放视频。 |
videocontext.pause | function | - | 暂停播放视频。 |
videocontext.stop | function | - | 停止播放视频。 |
videocontext.seek | function | - | 跳转到指定位置播放视频。 |
videocontext.mute | function | - | 切换播放音频静音状态。 |
videocontext.playbackrate | function | - | 设置视频倍速播放。 |
videocontext.requestfullscreen | function | - | 进入全屏播放视频。 |
videocontext.exitfullscreen | function | - | 退出全屏播放视频。 |
videocontext.showfloatingwindow | function | - | 显示/隐藏浮窗(画中画)。 |
videocontext.exitpictureinpicture | function | 基础库: 2.8.2 客户端: 10.1.92 |
退出画中画。 |
videocontext.showstatusbar | function | - | 显示状态栏,仅在 ios 全屏下有效。 |
videocontext.hidestatusbar | function | - | 隐藏状态栏,仅在 ios 全屏下有效。 |
完整的示例代码
.axml
.js
<view>
<video
id="myvideo"
src="{{src}}"
floating-mode="page"
>video>
<button
type="default"
size="defaultsize"
ontap="play"
>
开始播放
button>
<button
type="default"
size="defaultsize"
ontap="pause"
>
暂停播放
button>
<button
type="default"
size="defaultsize"
ontap="stop"
>
停止播放
button>
<button
type="default"
size="defaultsize"
ontap="seek"
>
跳转到指定位置
button>
<button
type="default"
size="defaultsize"
ontap="requestfullscreen"
>
进入全屏
button>
<button
type="default"
size="defaultsize"
ontap="exitfullscreen"
>
退出全屏
button>
<button
type="default"
size="defaultsize"
ontap="mute"
>
切换静音状态
button>
<button
type="default"
size="defaultsize"
ontap="playbackrate"
>
设置播放速度为 1.5
button>
<button
type="default"
size="defaultsize"
ontap="showstatusbar"
>
显示状态栏
button>
<button
type="default"
size="defaultsize"
ontap="hidestatusbar"
>
隐藏状态栏
button>
<button
type="default"
size="defaultsize"
ontap="showfloatingwindow"
>
进入画中画
button>
<button
type="default"
size="defaultsize"
ontap="exitpictureinpicture"
>
退出进入画中画
button>
view>
page ({
data: {
// src 为要播放的视频资源地址,支持优酷视频编码(支付宝客户端 10.1.75)。
src: 'xndm0otqzmdc2oa==',
},
onload () {
this.videocontext = my.createvideocontext ('myvideo');
},
play () {
console.log ('播放视频');
this.videocontext.play ();
},
pause () {
console.log ('暂停播放视频');
this.videocontext.pause ();
},
stop () {
console.log ('停止播放视频');
this.videocontext.stop ();
},
seek () {
console.log ('跳转 20s 进度,播放视频');
this.videocontext.seek (20);
},
requestfullscreen () {
console.log ('进入全屏');
this.videocontext.requestfullscreen ();
settimeout (() => {
console.log ('5s 之后退出横屏播放');
this.videocontext.exitfullscreen ();
}, 5000);
},
mute () {
console.log ('静音');
this.videocontext.mute (true);
},
playbackrate () {
console.log ('调整播放速度');
this.videocontext.playbackrate (1.5);
},
showfloatingwindow () {
console.log ('进入画中画');
this.videocontext.showfloatingwindow (true);
},
exitpictureinpicture () {
console.log ('退出画中画');
this.videocontext.exitpictureinpicture ();
},
showstatusbar () {
console.log ('显示状态栏,仅在 ios 全屏下有效。');
this.videocontext.showstatusbar ();
},
hidestatusbar () {
console.log ('隐藏状态栏,仅在 ios 全屏下有效。');
this.videocontext.hidestatusbar ();
},
});
q:怎么知道 videocontext 中方法是否调用成功?例如:我调用了 videocontext.play(), 怎么知道成功失败?
a:
可以在 axml 文件中,通过 video 组件 的 onerror
属性监听视频播放是否出现了错误。