uni-app的<video />封装成组件后play、pause等API方式控制视频失效问题已解决

uni-app的

操作步骤：

• 父级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>