init
This commit is contained in:
@@ -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);
|
||||
}
|
||||
113
xhs-mini-demos/component-case/video-autoplay/video-autoplay.js
Normal file
113
xhs-mini-demos/component-case/video-autoplay/video-autoplay.js
Normal file
@@ -0,0 +1,113 @@
|
||||
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('')}`;
|
||||
}
|
||||
|
||||
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,
|
||||
src: '',
|
||||
danmuList: [{
|
||||
text: '第 1s 出现的弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
}, {
|
||||
text: '第 3s 出现的弹幕',
|
||||
color: '#ff00ff',
|
||||
time: 3
|
||||
}],
|
||||
height: 200,
|
||||
showMute: false
|
||||
},
|
||||
// onReady() {
|
||||
// this.videoContext = xhs.createVideoContext('myVideo2');
|
||||
// },
|
||||
// setToggle() {
|
||||
// this.setData({
|
||||
// videoElVisible: !this.data.videoElVisible
|
||||
// });
|
||||
// },
|
||||
// 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
|
||||
// });
|
||||
// },
|
||||
// bindVideoMute() {
|
||||
// this.setData({
|
||||
// showMute: !this.data.showMute
|
||||
// });
|
||||
// },
|
||||
// /** demo2 相关方法 */
|
||||
// ...demo2Methods,
|
||||
|
||||
// // 手势
|
||||
// touchStart(e) {
|
||||
// console.log('====> touch start', e);
|
||||
// },
|
||||
// touchMove(e) {
|
||||
// console.log('====> touch move', e);
|
||||
// },
|
||||
// touchEnd(e) {
|
||||
// console.log('====> touch end', e);
|
||||
// },
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "视频",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
<view class="container">
|
||||
|
||||
<video
|
||||
src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
|
||||
bindloadedmetadata="handleLoadedMetadata"
|
||||
class="_flex_1 myVideo"
|
||||
muted="{{true}}"
|
||||
show-mute-btn="{{true}}"
|
||||
controls="{{true}}"
|
||||
initial-time="100"
|
||||
bindplay="handlePlay"
|
||||
bindwaiting="handleWaiting"
|
||||
bindpause="handleVideoPause"
|
||||
bindended="handleVideoEnd"
|
||||
bindprogress="handleProgress"
|
||||
bindfullscreenchange="handFullscreen"
|
||||
binderror="handleError"
|
||||
>
|
||||
</video>
|
||||
|
||||
<video
|
||||
src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
|
||||
bindloadedmetadata="handleLoadedMetadata"
|
||||
class="_flex_1 myVideo"
|
||||
muted="{{true}}"
|
||||
show-mute-btn="{{true}}"
|
||||
controls="{{true}}"
|
||||
initial-time="100"
|
||||
bindplay="handlePlay"
|
||||
bindwaiting="handleWaiting"
|
||||
bindpause="handleVideoPause"
|
||||
bindended="handleVideoEnd"
|
||||
bindprogress="handleProgress"
|
||||
bindfullscreenchange="handFullscreen"
|
||||
binderror="handleError"
|
||||
>
|
||||
</video>
|
||||
|
||||
<showbox title=".mp4 (使用 VideoContext 控制自动播放)">
|
||||
<view
|
||||
bindtouchstart="touchStart"
|
||||
bindtouchmove="touchMove"
|
||||
bindtouchend="touchEnd"
|
||||
style="height: 500rpx; background: #f60;"
|
||||
class="video-show">
|
||||
<video
|
||||
id="myVideo3"
|
||||
src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
|
||||
bindloadedmetadata="handleLoadedMetadata"
|
||||
class="_flex_1 myVideo"
|
||||
muted="{{true}}"
|
||||
show-mute-btn="{{false}}"
|
||||
controls="{{false}}"
|
||||
initial-time="100"
|
||||
bindplay="handlePlay"
|
||||
bindwaiting="handleWaiting"
|
||||
bindpause="handleVideoPause"
|
||||
bindended="handleVideoEnd"
|
||||
bindprogress="handleProgress"
|
||||
bindfullscreenchange="handFullscreen"
|
||||
binderror="handleError"
|
||||
>
|
||||
</video>
|
||||
</view>
|
||||
</showbox>
|
||||
|
||||
|
||||
<!-- 注释说明：小红书暂不支持 hls 视频流播放 -->
|
||||
<!-- <showbox title=".m3u8 (hls 视频播放)">
|
||||
<view class="video-show">
|
||||
<video
|
||||
id="myVideo"
|
||||
class="_flex_1 myVideo"
|
||||
muted="{{true}}"
|
||||
autoplay="{{ true }}"
|
||||
controls="{{ false }}"
|
||||
enableDanmu="{{true}}"
|
||||
show-center-play-btn="{{false}}"
|
||||
show-mute-btn="{{showMute}}"
|
||||
src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8">
|
||||
</video>
|
||||
</view>
|
||||
</showbox> -->
|
||||
|
||||
<!-- <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>
|
||||
Reference in New Issue
Block a user