init
This commit is contained in:
109
xhs-mini-demos/component-case/video/templates.js
Normal file
109
xhs-mini-demos/component-case/video/templates.js
Normal file
@@ -0,0 +1,109 @@
|
||||
/** 以下内容为自动生成，请勿手动修改 */
|
||||
|
||||
module.exports = {
|
||||
data: {
|
||||
page_data_0: `https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4`,
|
||||
|
||||
page_data_1: undefined,
|
||||
|
||||
page_data_2: true,
|
||||
|
||||
page_data_3: ``,
|
||||
|
||||
page_data_4: false,
|
||||
|
||||
page_data_5: false,
|
||||
|
||||
page_data_6: false,
|
||||
|
||||
page_data_7: false,
|
||||
|
||||
page_data_8: false,
|
||||
|
||||
page_data_9: false,
|
||||
|
||||
page_data_10: 0,
|
||||
|
||||
page_data_11: true,
|
||||
|
||||
page_data_12: true,
|
||||
|
||||
page_data_13: true,
|
||||
|
||||
page_data_14: true,
|
||||
|
||||
page_data_15: 0,
|
||||
|
||||
page_data_16: ["contain", "fill", "cover"],
|
||||
|
||||
page_data_17: `当前标题`,
|
||||
},
|
||||
|
||||
page_fun_0(e) {
|
||||
this.setData("page_data_0", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_1(e) {
|
||||
this.setData("page_data_1", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_2(e) {
|
||||
this.setData("page_data_2", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_3(e) {
|
||||
this.setData("page_data_3", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_4(e) {
|
||||
this.setData("page_data_4", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_5(e) {
|
||||
this.setData("page_data_5", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_6(e) {
|
||||
this.setData("page_data_6", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_7(e) {
|
||||
this.setData("page_data_7", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_8(e) {
|
||||
this.setData("page_data_8", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_9(e) {
|
||||
this.setData("page_data_9", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_10(e) {
|
||||
this.setData("page_data_10", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_11(e) {
|
||||
this.setData("page_data_11", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_12(e) {
|
||||
this.setData("page_data_12", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_13(e) {
|
||||
this.setData("page_data_13", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_14(e) {
|
||||
this.setData("page_data_14", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_15(e) {
|
||||
this.setData("page_data_15", e.detail.value);
|
||||
},
|
||||
|
||||
page_fun_16(e) {
|
||||
this.setData("page_data_17", e.detail.value);
|
||||
},
|
||||
};
|
||||
238
xhs-mini-demos/component-case/video/templates.xhsml
Normal file
238
xhs-mini-demos/component-case/video/templates.xhsml
Normal file
@@ -0,0 +1,238 @@
|
||||
<!-- 以下内容为自动生成，请勿手动修改 -->
|
||||
|
||||
<view class="container">
|
||||
<showbox title="video演示">
|
||||
<box>
|
||||
<view class="_ui-space">
|
||||
<view>
|
||||
{{page_data_4}}{{page_data_5}}
|
||||
<video
|
||||
src="{{page_data_0}}"
|
||||
duration="{{page_data_1}}"
|
||||
controls="{{page_data_2}}"
|
||||
danmu-list="{{page_data_3}}"
|
||||
enable-danmu="{{page_data_5}}"
|
||||
danmu-btn="{{page_data_4}}"
|
||||
autoplay="{{page_data_6}}"
|
||||
loop="{{page_data_7}}"
|
||||
muted="{{page_data_8}}"
|
||||
show-mute-btn="{{page_data_9}}"
|
||||
initial-time="{{page_data_10}}"
|
||||
show-progress="{{page_data_11}}"
|
||||
show-fullscreen-btn="{{page_data_12}}"
|
||||
show-play-btn="{{page_data_13}}"
|
||||
show-center-play-btn="{{page_data_14}}"
|
||||
object-fit="{{page_data_16[page_data_15]}}"
|
||||
poster="{{page_data_17}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>src</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_0}}"
|
||||
placeholder="src"
|
||||
type="text"
|
||||
bindinput="page_fun_0"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>duration</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_1}}"
|
||||
placeholder="duration"
|
||||
type="text"
|
||||
bindinput="page_fun_1"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启controls</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_2}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_2"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>danmuList</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_3}}"
|
||||
placeholder="danmuList"
|
||||
type="text"
|
||||
bindinput="page_fun_3"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启danmuBtn</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_4}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_4"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启enableDanmu</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_5}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_5"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启autoplay</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_6}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_6"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启loop</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_7}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_7"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启muted</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_8}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_8"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启showMuteBtn</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_9}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_9"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>initialTime</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_10}}"
|
||||
placeholder="initialTime"
|
||||
type="text"
|
||||
bindinput="page_fun_10"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启showProgress</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_11}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_11"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启showFullscreenBtn</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_12}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_12"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启showPlayBtn</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_13}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_13"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex _jc_space-between">
|
||||
<view class="_dflex _ai_center">
|
||||
<text>是否开启showCenterPlayBtn</text>
|
||||
</view>
|
||||
<switch
|
||||
checked="{{page_data_14}}"
|
||||
color="rgba(255, 36, 66, 1)"
|
||||
bindchange="page_fun_14"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>objectFit</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<picker
|
||||
value="{{page_data_15}}"
|
||||
range="{{page_data_16}}"
|
||||
bindchange="page_fun_15"
|
||||
>
|
||||
{{page_data_16[page_data_15] ?? '请选择'}}
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="_dflex">
|
||||
<view style="flex: 4" class="_dflex _ai_center"
|
||||
><text>poster</text></view
|
||||
>
|
||||
<view style="flex: 6" class="_ui-input">
|
||||
<input
|
||||
value="{{page_data_17}}"
|
||||
placeholder="poster"
|
||||
type="text"
|
||||
bindinput="page_fun_16"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
34
xhs-mini-demos/component-case/video/video.css
Normal file
34
xhs-mini-demos/component-case/video/video.css
Normal file
@@ -0,0 +1,34 @@
|
||||
|
||||
|
||||
.video-action button {
|
||||
margin: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video-action > view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.video-show {
|
||||
padding: 10px;
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden !important;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.myVideo {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.video-show video {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
._ui-button-transparent {
|
||||
background-color: white;
|
||||
border: 1px solid #ff2442;
|
||||
color: rgba(255, 36, 66, 1);
|
||||
}
|
||||
117
xhs-mini-demos/component-case/video/video.js
Normal file
117
xhs-mini-demos/component-case/video/video.js
Normal file
@@ -0,0 +1,117 @@
|
||||
const __templateJs = require("./templates.js");
|
||||
const __mergePageOptions = require("../../util/mergePageOptions.js");
|
||||
function getRandomColor() {
|
||||
const rgb = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16);
|
||||
color = color.length === 1 ? `0${color}` : color;
|
||||
rgb.push(color);
|
||||
}
|
||||
return `#${rgb.join('')}`;
|
||||
}
|
||||
Page(__mergePageOptions({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'video',
|
||||
path: 'page/component/pages/video/video'
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
this.videoContext = xhs.createVideoContext('myVideo');
|
||||
},
|
||||
inputValue: '',
|
||||
data: {
|
||||
enableAutoRotation: true,
|
||||
src: '',
|
||||
danmuList: [{
|
||||
text: '第 1s 出现的弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
}, {
|
||||
text: '第 3s 出现的弹幕',
|
||||
color: '#ff00ff',
|
||||
time: 3
|
||||
}],
|
||||
height: 200,
|
||||
showMute: false
|
||||
},
|
||||
bindInputBlur(e) {
|
||||
this.inputValue = e.detail.value;
|
||||
},
|
||||
bindButtonTap() {
|
||||
const that = this;
|
||||
xhs.chooseVideo({
|
||||
sourceType: ['album', 'camera'],
|
||||
maxDuration: 60,
|
||||
camera: ['front', 'back'],
|
||||
success(res) {
|
||||
that.setData({
|
||||
src: res.tempFilePath
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
bindVideoEnterPictureInPicture() {
|
||||
console.log('进入小窗模式');
|
||||
},
|
||||
bindVideoLeavePictureInPicture() {
|
||||
console.log('退出小窗模式');
|
||||
},
|
||||
bindVideoPlay() {
|
||||
this.videoContext.play();
|
||||
},
|
||||
bindVideoPause() {
|
||||
this.videoContext.pause();
|
||||
},
|
||||
bindVideoStop() {
|
||||
this.videoContext.stop();
|
||||
},
|
||||
bindVideoSeek() {
|
||||
this.videoContext.seek(10);
|
||||
},
|
||||
bindVideoSendDanmu() {
|
||||
this.videoContext.sendDanmu({
|
||||
text: '小红书小程序',
|
||||
color: getRandomColor(),
|
||||
time: 12
|
||||
});
|
||||
},
|
||||
videoErrorCallback(e) {
|
||||
console.log('视频错误信息:');
|
||||
console.log(e.detail.errMsg);
|
||||
},
|
||||
handleSwitchChange(e) {
|
||||
this.setData({
|
||||
enableAutoRotation: e.detail.value
|
||||
});
|
||||
},
|
||||
handleVideoEnd() {
|
||||
console.log('----------lemon video end');
|
||||
},
|
||||
handleVideoTimeUpdate() {
|
||||
console.log('----------lemon video time update');
|
||||
},
|
||||
handFullscreen() {
|
||||
console.log('----------lemon video full screen');
|
||||
},
|
||||
handleWaiting() {
|
||||
console.log('----------lemon video handleWaiting');
|
||||
},
|
||||
handleError() {
|
||||
console.log('----------lemon video handleError');
|
||||
},
|
||||
handleProgress() {
|
||||
console.log('----------lemon video handleProgress');
|
||||
},
|
||||
handleLoadedMetadata() {
|
||||
console.log('----------lemon video handleLoadedMetadata');
|
||||
},
|
||||
bindVideoMute() {
|
||||
this.setData({
|
||||
showMute: !this.data.showMute
|
||||
});
|
||||
},
|
||||
bindloadedmetadata(e) {
|
||||
console.log('bindloadedmetadata', e);
|
||||
}
|
||||
}, __templateJs));
|
||||
7
xhs-mini-demos/component-case/video/video.json
Normal file
7
xhs-mini-demos/component-case/video/video.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "视频",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
32
xhs-mini-demos/component-case/video/video.xhsml
Normal file
32
xhs-mini-demos/component-case/video/video.xhsml
Normal file
@@ -0,0 +1,32 @@
|
||||
<view class="container">
|
||||
<view class="video-show">
|
||||
<video
|
||||
id="myVideo"
|
||||
class="_flex_1 myVideo"
|
||||
muted="{{true}}"
|
||||
autoplay="{{false}}"
|
||||
enableDanmu="{{true}}"
|
||||
show-center-play-btn="{{false}}"
|
||||
show-mute-btn="{{showMute}}"
|
||||
bindloadedmetadata="bindloadedmetadata"
|
||||
src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4">
|
||||
</video>
|
||||
</view>
|
||||
|
||||
<showbox title="基础使用">
|
||||
<box>
|
||||
<view class="video-action">
|
||||
<view>
|
||||
<button class="_ui-button-transparent" bindtap="bindVideoPlay">播放</button>
|
||||
<button class="_ui-button-transparent" bindtap="bindVideoPause">暂停</button>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<button class="_ui-button-transparent" bindtap="bindVideoStop">停止</button>
|
||||
<button class="_ui-button-transparent" bindtap="bindVideoSeek">跳到第10秒</button>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
<include src="templates.xhsml" />
|
||||
Reference in New Issue
Block a user