uni-app vue3+vite @dcloudio/uni-app版本3.0.0-alpha-3081120230719001 video原生标签所有@绑定事件无法触发
uni-app vue3+vite @dcloudio/uni-app版本3.0.0-alpha-3081120230719001 video原生标签所有@绑定事件无法触发
| 项目信息 | 详细信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 64 位 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.24 |
| 第三方开发者工具版本号 | 1.0.6 |
| 基础库版本号 | 3.5.4 |
| 项目创建方式 | HBuilderX |
示例代码：
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" @timeupdate="onTimeUpdate" enable-danmu danmu-btn
controls></video>
</view>
<!-- #ifndef MP-ALIPAY -->
<view class="uni-list uni-common-mt">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="uni-btn-v">
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: ''
}
},
onReady: function (res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods: {
sendDanmu: function () {
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
});
this.danmuValue = '';
},
onTimeUpdate: function (e) {
console.log(e, 'e==========================')
},
videoErrorCallback: function (e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
getRandomColor: function () {
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('')
}
}
}
</script>
操作步骤：
<p>v3编译后代码：</p>
感谢反馈，我调整了一下格式化，我使用最新的 HBuilderX alpha 版本，微信小程序真机运行播放打印 update、暂停视频、发送弹幕功能正常。
我看你提供的版本是 2023 年 7 月份的依赖，请升级到最新依赖再试一下？或者你有其他需求？
回复 7***@qq.com: 我的操作：打开 4.26 alpha 版本，新建 vue3 项目，粘贴你提供的代码运行到模拟器、真机，观察 console 变化。你是不想升级你的 uni-app 依赖吗，如果你是 vue3 cli 项目需要升级你的 uni-app 依赖，cli 项目和 HBuilderX 版本无关系。你用的还是旧逻辑
回复 DCloud_UNI_OttoJi: 我是依赖安装"@dcloudio/uni-app": "3.0.0-alpha-3081120230719001"版本，构建工具为vite 4.5.1，我新建vue3项目确实是可以的 但是新建的vue3项目是没有vite构建工具的 你们内置的构建工具是webpack吗
回复 7***@qq.com: 嗯嗯，理解你的操作了。vue3 版本的 uni-app 都是使用 vite，不同的是 hx 依赖是内置的，cli 依赖用户自己处理。如果你新建 vue3 项目没问题，我认为就是 cli 的依赖没有升级导致的，你看你的版本还是 2023 年的，你使用 npx @dcloudio/uvm latesst 升级到最新版本试一试吧。我觉得是这块没有和你讲清楚
回复 7***@qq.com: 是需要我提供一个 video 的模版吗，你参考这个 https://gitcode.net/xiurensha5731/uni-app-questions/-/tree/q/video
回复 DCloud_UNI_OttoJi: 我对比了下俩者之间的区别 我这边自己项目编译出来的小程序代码是exports.G = o$1; const o$1 = (value, key2) => vOn(value, key2); 使用uni-app cli依赖自己安装 内置编译出来的小程序代码是exports.o = o;const o = (value, key) => vOn(value); 俩个项目下 只有这块代码是不一致的 具体能帮我排查下吗
回复 7***@qq.com: 为什么要关注编译产物？我提供的复现工程和你自己的项目依赖有什么区别？你是想学习使用，还是现在还是有问题？现在最新的 HBuilderX 创建（编辑器内置依赖）和 cli 最新依赖（指定版本 npm 依赖）都可以正常使用 video 的各项功能吧？
在uni-app中，使用Vue 3和Vite集成时，如果遇到<video>原生标签的@绑定事件无法触发的问题，这通常是由于事件绑定机制或组件内部处理的问题。虽然官方文档和社区中较少直接提及此类特定版本的问题，但我们可以尝试几种常见的解决方法。以下是一个基本的代码示例，展示如何在uni-app的Vue 3+Vite环境中正确使用<video>标签并绑定事件。
首先，确保你的项目已经正确配置了Vue 3和Vite，并且已经安装了@dcloudio/uni-app版本3.0.0-alpha-3081120230719001。
<template>
<view class="container">
<!-- 使用ref来获取video元素，尝试直接操作DOM -->
<video
ref="videoRef"
src="https://www.example.com/path/to/your/video.mp4"
controls
@play="onVideoPlay"
@pause="onVideoPause"
@ended="onVideoEnded"
></video>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const videoRef = ref(null);
// 定义事件处理函数
const onVideoPlay = () => {
console.log('Video is playing');
};
const onVideoPause = () => {
console.log('Video is paused');
};
const onVideoEnded = () => {
console.log('Video has ended');
};
// 在组件挂载后，尝试手动添加事件监听作为备选方案
onMounted(() => {
if (videoRef.value) {
videoRef.value.addEventListener('play', onVideoPlay);
videoRef.value.addEventListener('pause', onVideoPause);
videoRef.value.addEventListener('ended', onVideoEnded);
}
});
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
video {
width: 80%;
height: auto;
}
</style>
在这个例子中，我们首先尝试通过Vue的模板语法直接绑定事件（@play, @pause, @ended）。如果这些事件仍然无法触发，我们可以在组件挂载后（onMounted生命周期钩子）手动为<video>元素添加事件监听器。这种方法可以作为事件绑定不工作的备选方案。
请注意，由于uni-app的特殊性质，特别是其跨平台能力，某些原生事件可能在特定平台上表现不一致。如果问题依旧存在，建议查阅最新的uni-app官方文档或社区论坛，看看是否有其他开发者遇到并解决了相同的问题。此外，考虑是否为已知的bug，并查看是否有相关的issue跟踪或修复计划。
