a***@foxmail.com
a***@foxmail.com
  • 发布:2021-06-02 16:24
  • 更新:2021-06-02 16:52
  • 阅读:3604

【已解决】【报Bug】uni-app的<video />封装成组件后play、pause等api方式控制视频失效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: m1

第三方开发者工具版本号: 2.0.0-31920210514002

基础库版本号: 2.0.0-31920210514002

项目创建方式: CLI

CLI版本号: 2.0.0-31920210514002

操作步骤:

父级video的play()、pause()正常,组件的video不正常

预期结果:

组件video的play()、pause()正常

实际结果:

父级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>  
2021-06-02 16:24 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

使用 in 方法试试

  • 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

该问题目前已经被锁定, 无法添加新回复