当前位置：首页 > ai >正文

uniapp 处理app video组件各种问题

ai 2025/7/17 13:56:40

解决思路

要做短视频小程序并且在小程序 app通用哎~

1. 在app端用h5原生video

<view v-html="'<video src=''><video/>'"></view>

2.控制使用renderjs

renderjs文档

// 绑定数据 向视图层传递
<view class="" :currentSwiperIndex="currentSwiperIndex" :change:currentSwiperIndex='videoMod.videoManage'></view>
// 触发视图层方法
<view @click.stop="videoMod.showControls" :currentSwiperIndex="currentSwiperIndex" ></view>

<script module="videoMod" lang="renderjs">export default {data() {return {currentSwiperIndex: 0,lastSwiperIndex: 0}},mounted() {},methods: { setCurrentTime(event, ownerInstance){let video = document.getElementById(`video_${this.currentSwiperIndex}`); var duration = video.duration;  let updateCurrentTime =   duration * ( event.target.value / 100  );  video.currentTime = updateCurrentTime; },showControls(event, ownerInstance) { let video = document.getElementById(`video_${this.currentSwiperIndex}`); let type = video.paused ? 'play' : 'pause';video[type]();//向逻辑层通信并且传递数据ownerInstance.callMethod('onVideoType', type);}, videoManage(newValue, oldValue, ownerVm, vm) {  this.currentSwiperIndex = newValue;this.lastSwiperIndex = oldValue;if (newValue < 0) return;let video = document.getElementById(`video_${this.currentSwiperIndex}`);if (!video) return;video.play();let timeupdate = ()=>{var currentTime = video.currentTime; // 获取当前播放时间（秒）var duration = video.duration; // 获取视频总时长（秒）var percent = (currentTime / duration) * 100; // 计算播放进度百分比 //向逻辑层通信并且传递数据ownerVm.callMethod("synchronous",{percent:percent.toFixed(2),id:newValue,currentTime,duration, }) }// video.addEventListener('timeupdate', timeupdate);let oldValueVideo = document.getElementById(`video_${this.lastSwiperIndex}`);if (!oldValueVideo) return;oldValueVideo.pause(); // oldValueVideo.removeEventListener("timeupdate",timeupdate);},}}
</script>