fix:su-video组件功能调整
parent
7a29f6755e
commit
79c361db2e
|
@ -1,13 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="ui-video-wrap">
|
<view class="ui-video-wrap">
|
||||||
<video
|
<video
|
||||||
v-show="state.isplay"
|
|
||||||
:id="`sVideo${uid}`"
|
:id="`sVideo${uid}`"
|
||||||
class="radius"
|
class="radius"
|
||||||
:style="[{ height: height + 'px' }]"
|
:style="[{ height: height + 'px' }]"
|
||||||
:src="src"
|
:src="src"
|
||||||
controls
|
controls
|
||||||
object-fit="fill"
|
object-fit="contain"
|
||||||
:enable-progress-gesture="state.enableProgressGesture"
|
:enable-progress-gesture="state.enableProgressGesture"
|
||||||
:initial-time="initialTime"
|
:initial-time="initialTime"
|
||||||
x5-video-player-type="h5"
|
x5-video-player-type="h5"
|
||||||
|
@ -18,22 +17,12 @@
|
||||||
@play="play"
|
@play="play"
|
||||||
@pause="pause"
|
@pause="pause"
|
||||||
@ended="end"
|
@ended="end"
|
||||||
|
:poster="poster"
|
||||||
>
|
>
|
||||||
<!-- #ifdef APP-PLUS -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
<cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
|
<cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</video>
|
</video>
|
||||||
<view
|
|
||||||
v-show="!state.isplay"
|
|
||||||
class="poster-wrap radius"
|
|
||||||
:style="{ height: height + 'px' }"
|
|
||||||
@click="beforePlay"
|
|
||||||
>
|
|
||||||
<image class="poster-image" mode="aspectFill" :src="poster" />
|
|
||||||
<view class="play-icon ss-flex ss-row-center ss-col-center">
|
|
||||||
<text class="cicon-play-arrow ss-font-40"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -58,7 +47,6 @@
|
||||||
|
|
||||||
// 数据
|
// 数据
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
isplay: false, // 播放状态
|
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
enableProgressGesture: true, // 手势滑动
|
enableProgressGesture: true, // 手势滑动
|
||||||
// #endif
|
// #endif
|
||||||
|
@ -121,16 +109,13 @@
|
||||||
// 当暂停播放时触发 pause 事件
|
// 当暂停播放时触发 pause 事件
|
||||||
const pause = () => {
|
const pause = () => {
|
||||||
console.log('视频暂停');
|
console.log('视频暂停');
|
||||||
state.isplay = false;
|
|
||||||
};
|
};
|
||||||
// 视频结束触发end 时间
|
// 视频结束触发end 时间
|
||||||
const end = () => {
|
const end = () => {
|
||||||
console.log('视频结束');
|
console.log('视频结束');
|
||||||
state.isplay = false;
|
|
||||||
};
|
};
|
||||||
// 开始播放
|
// 开始播放
|
||||||
const startPlay = () => {
|
const startPlay = () => {
|
||||||
state.isplay = true;
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const video = uni.createVideoContext(`sVideo${props.index}`, vm);
|
const video = uni.createVideoContext(`sVideo${props.index}`, vm);
|
||||||
video.play();
|
video.play();
|
||||||
|
@ -141,12 +126,10 @@
|
||||||
const pausePlay = () => {
|
const pausePlay = () => {
|
||||||
const video = uni.createVideoContext(`sVideo${props.index}`, vm);
|
const video = uni.createVideoContext(`sVideo${props.index}`, vm);
|
||||||
video.pause();
|
video.pause();
|
||||||
state.isplay = false;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 播放前拦截
|
// 播放前拦截
|
||||||
const beforePlay = () => {
|
const beforePlay = () => {
|
||||||
state.isplay = true;
|
|
||||||
uni.getNetworkType({
|
uni.getNetworkType({
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
console.log(res.networkType, 'res.networkType');
|
console.log(res.networkType, 'res.networkType');
|
||||||
|
|
Loading…
Reference in New Issue