父级video的play()、pause()正常,组件的video不正常
- 发布:2021-06-02 16:24
- 更新:2021-06-02 16:52
- 阅读:3604
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: m1
第三方开发者工具版本号: 2.0.0-31920210514002
基础库版本号: 2.0.0-31920210514002
项目创建方式: CLI
CLI版本号: 2.0.0-31920210514002
操作步骤:
预期结果:
组件video的play()、pause()正常
组件video的play()、pause()正常
实际结果:
父级video的play()、pause()正常,组件的video不正常
父级video的play()、pause()正常,组件的video不正常
bug描述:
已解决:
uni.createVideoContext(videoId, this)
创建并返回 video 上下文 videoContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 <video> 组件。
-以下原问题-
video组件放在页面中, this.videoContext.play()、 this.videoContext.pause()等api控制有效。
同样的代码包一层放入组件内,api控制失效
一级页面,控制有效
<template>
<view>
<video
id="myVideoOut"
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
controls
:direction="0"
object-fit="fill"
poster="http://wx.qlogo.cn/mmopen/iahdQicCC5VBSiaBc32cq9rHiaMAYsr2Y38TJrYrnyG1Xd9EaVoWAy8zMb8GJhMNEVtsypzuh5DicH3SfQWrEqYLtDNEzRq74uDTI/0"
/>
<view @click="stopVideo">stop out</view>
<view @click="playVideo">play out</view>
<xxx />
</view>
</template>
<script>
import xxx from './xxx';
export default {
components: {
xxx,
},
methods: {
stopVideo() {
this.videoContext.pause();
},
playVideo() {
this.videoContext.play();
},
},
mounted() {
this.videoContext = uni.createVideoContext('myVideoOut');
},
};
</script>
<style lang="scss"></style>
xxx组件,和一级页面同样的代码,api控制失效
<template>
<view>
<video
id="myVideoIn"
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
controls
:direction="0"
object-fit="fill"
poster="http://wx.qlogo.cn/mmopen/iahdQicCC5VBSiaBc32cq9rHiaMAYsr2Y38TJrYrnyG1Xd9EaVoWAy8zMb8GJhMNEVtsypzuh5DicH3SfQWrEqYLtDNEzRq74uDTI/0"
/>
<view @click="stopVideo">stop in</view>
<view @click="playVideo">play in</view>
</view>
</template>
<script>
export default {
methods: {
stopVideo() {
this.videoContext.pause();
},
playVideo() {
this.videoContext.play();
},
},
mounted() {
this.videoContext = uni.createVideoContext('myVideoIn');
},
};
</script>
<style lang="scss"></style>
a***@foxmail.com (作者)
什么in方法...
2021-06-02 16:53
DCloud_UNI_GSQ
回复 a***@foxmail.com: 第二个参数传入组件实例,类似于其他 context 的 in 方法。这样:uni.createVideoContext('myVideoIn', xxx);
2021-06-02 16:55
a***@foxmail.com (作者)
回复 DCloud_UNI_GSQ: 修改组件内的视频 this.videoContext = uni.createVideoContext('myVideoIn', this); 加了个this这样改ok了,谢谢
2021-06-02 17:01