提交 4d6d19f9 编写于 作者: DCloud-yinjiacheng's avatar DCloud-yinjiacheng

更新video示例

上级 3d0c1bec
<template>
<view class="uni-flex-item">
<video class="video" ref="video" :header="header" :src=src :autoplay="autoplay" :loop="loop" :muted="muted"
:initial-time="initialTime" :duration="duration" :controls="controls" :danmu-btn="danmuBtn"
<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"
: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">
: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">
......@@ -141,8 +139,12 @@
<script lang="uts">
import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
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",
......@@ -174,12 +176,16 @@
text: '要显示的文本5',
color: '#000000',
time: 11
}] as Array<UTSJSONObject>,
}] as Array<Danmu>,
danmuBtn: false,
enableDanmu: true,
pageGesture: false,
direction: 0,
_direction: -90,
direction: {
direction: 0
} as RequestFullScreenOptions,
_direction: {
direction: -90
} as RequestFullScreenOptions,
showProgress: true,
showFullscreenBtn: true,
showPlayBtn: true,
......@@ -209,34 +215,34 @@
} as UTSJSONObject,
// API
pos: 10,
rate: "1.5",
rate: 1.5,
danmu: {
text: '要显示的文本',
color: '#FF0000'
} as UTSJSONObject
} as Danmu
}
},
methods: {
// API
play: function () {
console.log("play");
(this.$refs["video"] as VideoNode).play();
this.videoContext?.play();
},
pause: function () {
console.log("pause");
(this.$refs["video"] as VideoNode).pause();
this.videoContext?.pause();
},
seek: function (pos : number) {
console.log("seek -> " + pos);
(this.$refs["video"] as VideoNode).seek(pos);
this.videoContext?.seek(pos);
},
requestFullScreen: function (direction : number) {
console.log("requestFullScreen -> " + direction);
(this.$refs["video"] as VideoNode).requestFullScreen(direction);
requestFullScreen: function (options : RequestFullScreenOptions) {
console.log("requestFullScreen -> " + options);
this.videoContext?.requestFullScreen(options);
},
exitFullScreen: function () {
console.log("exitFullScreen");
(this.$refs["video"] as VideoNode).exitFullScreen();
this.videoContext?.exitFullScreen();
},
stop: function () {
console.log("stop");
......@@ -254,13 +260,13 @@
console.log("close");
(this.$refs["video"] as VideoNode).close();
},
sendDanmu: function (data : UTSJSONObject) {
console.log("sendDanmu -> " + data);
(this.$refs["video"] as VideoNode).sendDanmu(data);
sendDanmu: function (danmu : Danmu) {
console.log("sendDanmu -> " + danmu);
this.videoContext?.sendDanmu(danmu);
},
playbackRate: function (rate : string) {
playbackRate: function (rate : number) {
console.log("playbackRate -> " + rate);
(this.$refs["video"] as VideoNode).playbackRate(rate);
this.videoContext?.playbackRate(rate);
},
// 属性
setSrc: function (src : string) {
......@@ -299,8 +305,8 @@
this.pageGesture = !this.pageGesture;
console.log("pageGesture -> " + this.pageGesture)
},
setDirection: function (direction : number) {
this.direction = direction;
setDirection: function (options : RequestFullScreenOptions) {
this.direction = options;
console.log("direction -> " + this.direction)
},
setShowProgress: function () {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册