背景:需要在某个条件下通过.pause() 或者.play()方法;让视频暂停或者播放
template 部分代码,给video 设置了id 和 ref
<view style="width: 100%; height: 240px" class="video">
<video
:paused="isPaused"
ref="videoRef"
:id="'video' + jumpNum"
:src="videoUrl"
controls
class="videoStyle"
width="100%"
height="240px"
:autoplay="isAutoplay"
:initial-time="preVideoTime"
:show-center-play-btn="false"
@play="handlePlay"
@pause="onPause"
@ended="onEnd"
@timeupdate="onTimeUpdate"
></video>
<div v-if="videoLearnStatus <= '1'" class="cover"></div>
</view>
像平时vue2、vue3获取节点可以直接使用内置ref,或者原生js document.getElementById来获取,在模版中给元素添加ref,在vue2是用this.$ref,变量名称就获取到了,vue3是没有了this,只能先声明变量 利于 const videoRef= ref(null) ,获取在页面挂载后,value就能获取,但是我在小程序死活都拿到的null,后来发现拿不到,是跟环境有关系,由于小程序环境的限制,不能直接在setup函数内部使用ref来获取DOM元素,因为小程序的视图层是由小程序框架管理的,而不是浏览器的DOM。
解决办法:
先引入页面实例,再使用小程序提供的api进行获取,这样就能拿到关于dom节点的大小信息了
const videoRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
videoRef.value = uni.createVideoContext('video' + jumpNum.value, instance);
});
//这时候就能取到videoRef.value 的值
//然后通过videoRef.value.play()或者videoRef.value.pause() 实现video 的播放与暂停
这时候就能取到videoRef.value 的值
然后通过videoRef.value.play()或者videoRef.value.pause() 实现video 的播放与暂停。
需要注意的问题:
在使用createVideoContext还遇到不生效的问题,查看官方文档
在自定义组件中,第二个参数传入组件实例,以操作组件内的<video>组件
遇到 uni.createVideoContext 无效,大概率都是因为没有传入组件实例,传入即可。
vue2 可传入 this ,vue3 则通过getCurrentInstance()方式获取实例