uni-app vue3 uni-popup组件中使用video播放器手动暂停/播放不生效

uni-app vue3 uni-popup组件中使用video播放器手动暂停/播放不生效

代码示例

模板部分

<template>  
    <uni-popup ref="popup" background-color="#fff">  
        <button @click="operate">播放</button>  
        <video id="myVideo" ref="ddd" :src="url" enable-danmu danmu-btn controls @play="play" @timeupdate="timeupdate"  
            @pause="pause"></video>  
    </uni-popup>  
</template>

脚本部分

<script>  
export default {  
    data() {  
        return {  
            url: '',  
            videoContext: '',  
            isPlay: false  
        }  
    },  
    onReady() {  

    },  
    methods: {  
        open(params) {  
            this.videoContext = uni.createVideoContext('myVideo')  
            this.$refs.popup.open()  
            this.url = params.url  
        },  
        operate() {  
            if (this.isPlay) {  
                this.videoContext.pause()  
            } else {  
                this.videoContext.play()  
            }  
        },  
        play() {  
            this.isPlay = true  
        },  
        paruse() {  
            this.isPlay = false  
        }  
    }  
}  
</script>

样式部分

<style lang="scss" scoped>  
video {  
    width: 100vw;  
}  
</style>

更多关于uni-app vue3 uni-popup组件中使用video播放器手动暂停/播放不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

是在那端出现的，h5 测试正常

更多关于uni-app vue3 uni-popup组件中使用video播放器手动暂停/播放不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


微信小程序

同问，rtsp调用stop时，无法发出 teardown ，目前在anroid下测试。

在使用 uni-app 的 uni-popup 组件中嵌入 video 播放器时，可能会遇到手动暂停/播放不生效的问题。这通常是由于 uni-popup 的弹出层机制与 video 组件的交互问题导致的。以下是一些可能的解决方案：

1. 使用 v-if 控制 video 组件的显示

uni-popup 组件在弹出时会重新渲染内容，这可能会导致 video 组件的行为异常。你可以使用 v-if 来控制 video 组件的显示，确保在弹出层打开时才渲染 video 组件。

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <video v-if="showVideo" :src="videoSrc" controls></video>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const popup = ref(null);
const showVideo = ref(false);
const videoSrc = ref('your-video-url.mp4');

const openPopup = () => {
  showVideo.value = true;
  popup.value.open();
};

const closePopup = () => {
  showVideo.value = false;
  popup.value.close();
};
</script>

2. 使用 uni-popup 的 @change 事件

uni-popup 提供了一个 @change 事件，可以用来监听弹出层的状态变化。你可以在这个事件中手动控制 video 的播放和暂停。

<template>
  <view>
    <uni-popup ref="popup" type="bottom" @change="onPopupChange">
      <video ref="videoPlayer" :src="videoSrc" controls></video>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const popup = ref(null);
const videoPlayer = ref(null);
const videoSrc = ref('your-video-url.mp4');

const onPopupChange = (e) => {
  if (e.show) {
    // 弹出层打开时播放视频
    videoPlayer.value.play();
  } else {
    // 弹出层关闭时暂停视频
    videoPlayer.value.pause();
  }
};

const openPopup = () => {
  popup.value.open();
};

const closePopup = () => {
  popup.value.close();
};
</script>

3. 使用 uni.createVideoContext

如果你使用的是原生 video 组件，可以通过 uni.createVideoContext 来获取 video 的上下文，并手动控制播放和暂停。

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <video id="myVideo" :src="videoSrc" controls></video>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const popup = ref(null);
const videoSrc = ref('your-video-url.mp4');
let videoContext = null;

onMounted(() => {
  videoContext = uni.createVideoContext('myVideo');
});

const openPopup = () => {
  popup.value.open();
  videoContext.play();
};

const closePopup = () => {
  popup.value.close();
  videoContext.pause();
};
</script>

4. 检查 video 组件的 controls 属性

确保 video 组件的 controls 属性已经启用，以便用户可以通过视频控件手动控制播放和暂停。

<video :src="videoSrc" controls></video>

5. 检查 uni-popup 的 maskClick 属性

如果 uni-popup 的 maskClick 属性设置为 true，点击遮罩层会关闭弹出层。这可能会影响 video 组件的交互。你可以将 maskClick 设置为 false，然后通过其他方式关闭弹出层。

<uni-popup ref="popup" type="bottom" :maskClick="false">
  <video :src="videoSrc" controls></video>
</uni-popup>
回到顶部