init
This commit is contained in:
69
xhs-mini-demos/component-case/video-player/video-player.css
Normal file
69
xhs-mini-demos/component-case/video-player/video-player.css
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
.video-action button {
|
||||
margin: 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video-action-input .video-action-input-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.video-action-input .player-text {
|
||||
width: 180rpx;
|
||||
font-weight: bolder;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.video-action-input .player-input {
|
||||
flex: 1;
|
||||
border-bottom: 1rpx solid rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
|
||||
.video-action > view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.video-show {
|
||||
padding: 10rpx;
|
||||
border-radius: 12rpx !important;
|
||||
overflow: hidden !important;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.myVideo {
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
|
||||
.video-show video {
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
|
||||
._ui-button-transparent {
|
||||
background-color: white;
|
||||
border: 1rpx solid #ff2442;
|
||||
color: rgba(255, 36, 66, 1);
|
||||
}
|
||||
|
||||
.album-container {
|
||||
display: grid;
|
||||
grid-template-columns: 33.33% 33.33% 33.33%; /* 每列占 33.33% */
|
||||
grid-template-rows: auto; /* 行高根据内容自动适配 */
|
||||
gap: 10rpx; /* 设置子项之间的间距 */
|
||||
}
|
||||
|
||||
.album-container .album-item {
|
||||
background-color: white;
|
||||
border: 1rpx solid #ff2442;
|
||||
color: rgba(255, 36, 66, 1);
|
||||
}
|
||||
|
||||
.album-container .album-item:active {
|
||||
background-color: #ff2442;
|
||||
color: white;
|
||||
}
|
||||
114
xhs-mini-demos/component-case/video-player/video-player.js
Normal file
114
xhs-mini-demos/component-case/video-player/video-player.js
Normal file
@@ -0,0 +1,114 @@
|
||||
|
||||
const demo2Methods = {
|
||||
handleLoadedMetadata(e) {
|
||||
console.log('----------lemon video handleLoadedMetadata', e, this.videoContext);
|
||||
if (this.videoContext) {
|
||||
this.videoContext.play();
|
||||
}
|
||||
},
|
||||
handlePlay(e) {
|
||||
console.log('----------lemon video handlePlay', e);
|
||||
},
|
||||
handleWaiting(e) {
|
||||
console.log('----------lemon video handleWaiting', e);
|
||||
},
|
||||
handleVideoTimeUpdate(e) {
|
||||
console.log('----------lemon video time update', e);
|
||||
},
|
||||
handleVideoPause(e) {
|
||||
console.log('----------lemon video pause', e);
|
||||
},
|
||||
handleVideoEnd() {
|
||||
console.log('----------lemon video end', e);
|
||||
},
|
||||
handleProgress(e) {
|
||||
console.log('----------lemon video handleProgress', e);
|
||||
},
|
||||
handFullscreen(isFullscreen) {
|
||||
console.log('----------lemon video full screen', isFullscreen);
|
||||
},
|
||||
handleError(e) {
|
||||
console.log('----------lemon video handleError', e);
|
||||
console.log('视频错误信息:');
|
||||
console.log(e.detail.errMsg);
|
||||
},
|
||||
};
|
||||
|
||||
Page({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'video',
|
||||
path: 'page/component/pages/video/video'
|
||||
};
|
||||
},
|
||||
data: {
|
||||
videoElVisible: true,
|
||||
// 剧目id
|
||||
album_id: '674548b2c1f9020001e9f9d1',
|
||||
// 剧集id
|
||||
episode_id: '674548b2c1f9020001e9f9d2',
|
||||
|
||||
// 剧目列表
|
||||
album_2_episode_list: [
|
||||
{
|
||||
albumId: "674548b2c1f9020001e9f9d1",
|
||||
albumName: "测试剧目1",
|
||||
episodeList: [
|
||||
{
|
||||
"episodeName": "第一集",
|
||||
"episodeId": "674548b2c1f9020001e9f9d2",
|
||||
},
|
||||
{
|
||||
"episodeName": "第二集",
|
||||
"episodeId": "674548b2c1f9020001e9f9d3",
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
height: 200,
|
||||
},
|
||||
onReady() {
|
||||
this.videoContext = xhs.createVideoContext('video-player-test');
|
||||
},
|
||||
bindVideoPlay() {
|
||||
this.videoContext.play();
|
||||
},
|
||||
bindVideoPause() {
|
||||
this.videoContext.pause();
|
||||
},
|
||||
bindVideoStop() {
|
||||
this.videoContext.stop();
|
||||
},
|
||||
bindVideoSeek() {
|
||||
this.videoContext.seek(10);
|
||||
},
|
||||
toggleVisible() {
|
||||
this.setData({
|
||||
videoElVisible: !this.data.videoElVisible
|
||||
});
|
||||
},
|
||||
/** demo2 相关方法 */
|
||||
...demo2Methods,
|
||||
|
||||
// 处理剧集 id
|
||||
handleEpisodeId(e) {
|
||||
this.setData({
|
||||
episode_id: e.detail.value
|
||||
});
|
||||
},
|
||||
// 处理剧目 id
|
||||
handleAlbumId(e) {
|
||||
this.setData({
|
||||
album_id: e.detail.value
|
||||
});
|
||||
},
|
||||
// 处理剧集切换
|
||||
handleEpisodeChange(e) {
|
||||
const { albumid, episodeid } = e.currentTarget.dataset;
|
||||
console.log('----------lemon video handleEpisodeChange', albumid, episodeid);
|
||||
this.setData({
|
||||
album_id: albumid,
|
||||
episode_id: episodeid
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "视频",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<view class="container">
|
||||
<showbox title="短剧播放器(video-player)基础使用">
|
||||
<xhs-video-player
|
||||
xhs:if="{{videoElVisible}}"
|
||||
id="video-player-test"
|
||||
class="_flex_1 myVideo"
|
||||
muted="{{true}}"
|
||||
controls="{{true}}"
|
||||
show-mute-btn="{{true}}"
|
||||
album-id="{{album_id}}"
|
||||
episode-id="{{episode_id}}"
|
||||
bindloadedmetadata="handleLoadedMetadata"
|
||||
bindplay="handlePlay"
|
||||
bindwaiting="handleWaiting"
|
||||
bindpause="handleVideoPause"
|
||||
bindended="handleVideoEnd"
|
||||
bindprogress="handleProgress"
|
||||
bindfullscreenchange="handFullscreen"
|
||||
binderror="handleError"
|
||||
>
|
||||
</xhs-video-player>
|
||||
</showbox>
|
||||
|
||||
<showbox title="短剧控制">
|
||||
<box>
|
||||
<view class="video-action-input">
|
||||
<view class="video-action-input-item">
|
||||
<view class="player-text">albumId:</view>
|
||||
<view class="player-input">
|
||||
<input value="{{album_id}}" placeholder="输入剧目id" type="text" bindinput="handleAlbumId" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-action-input-item">
|
||||
<view class="player-text">episodeId:</view>
|
||||
<view class="player-input">
|
||||
<input value="{{episode_id}}" placeholder="输入剧集id" type="text" bindinput="handleEpisodeId" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
<button class="_ui-button-transparent" bindtap="toggleVisible">控制播放器展示</button>
|
||||
</view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
|
||||
<showbox
|
||||
xhs:for="{{album_2_episode_list}}"
|
||||
xhs:for-item="albumItem"
|
||||
title="剧目: {{albumItem.albumName}}"
|
||||
>
|
||||
<box>
|
||||
<view class="album-container">
|
||||
<button
|
||||
xhs:for="{{ albumItem.episodeList }}"
|
||||
xhs:for-item="episode"
|
||||
class="album-item"
|
||||
data-albumId="{{albumItem.albumId}}"
|
||||
data-episodeId="{{episode.episodeId}}"
|
||||
bindtap="handleEpisodeChange">
|
||||
{{episode.episodeName}}
|
||||
</button>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
Reference in New Issue
Block a user