公告列表
公告列表
收藏
回答

video组件 是由点击cover-view层控制video播放的按钮。点击的时候没有直接自动播放？

点击cover-view的时候，bindplay执行，that.videoContext.play(),然后把isShow变成false，但是，视频并没有直接播放。而且视频显示出来画面了，还需要点击视频里控制播放的按钮才可以播放，请问大神，这个是什么原因啊?求教怎么解决，谢谢

最后一次编辑于  2020-05-27
回答关注问题邀请回答
收藏

3 个回答

  • 『空白』
    『空白』
    2020-05-27

    我粗略的试了下，在video里的cover-view绑定一个点击事件，然后创建video上下文VideoContext对象，然后调用.play()就可以了。

    1.首先确定视频链接是否能正常播放；2.videoContext是否获取到了

    wxml代码：

    <video id="vvv" src="视频链接" bindplay="bbb">
  <cover-view bindtap="aaa" style="width:200rpx;height:200rpx;background:blue;">fraefreaw</cover-view>

    js代码：

    aaa() {
    let ar = wx.createVideoContext('vvv')
    ar.play()
  },
  bbb(e) {
    console.log(e)
  }

    2020-05-27
    有用 2
    回复 10
    • 大原儿
      大原儿
      2020-05-27
      大神，这个是可以正常播放的，我点击cover-view让他隐藏之后播放么，这时候视频已经显示出来画面了，里面有个controls的控制按钮，再点击里面这个控制按钮就可以播放视频了，但是这样就相当于我点了2遍才播放了视频啊，感觉对用户不太友好，videoContext也是获取到了，我点击的时候是有打印play的字符串，我不太明白，我点击cover-view的时候，这个就隐藏了，然后还触发了bindpause这个事件，视频没有直接播放。这个真的就不明白了，我点击播放，然而bindpause触发了，是因为show-center-play-btn="{{false}}"失效了么。
      2020-05-27
      赞
      回复
    • 『空白』
      『空白』
      2020-05-27回复大原儿
      没有看太懂，我并没有遇到需要点击两次才播放的现象。如果你的需求只是点击cover-view区域后隐藏它并且播放视频的话，点一次就可以了，这里是我刚建的代码片段，你可以看看
      https://developers.weixin.qq.com/s/z3M6KEmG7hhZ
      2020-05-27
      赞 1
      回复
    • 大原儿
      大原儿
      2020-05-27
      我也不清楚啊，我刚写的还是有这个问题，不知道为啥，我给你贴代码，你可以试试，我不太会弄代码片段，
      2020-05-27
      赞
      回复
    • 大原儿
      大原儿
      2020-05-27
      <video class="videostyle" src="" controls show-center-play-btn="{{false}}" show-fullscreen-btn show-play-btn object-fit="fill" bindpause="bindpause" bindended="bindended" style="height:400px">
        <cover-view class="video_cover" wx:if="{{isShow}}" bindtap="bindplay">
         <cover-image src="/images/video_cover.png" mode="widthFix"></cover-image>
         <cover-image src="/images/video_play.png" mode="widthFix" class="video_play_icon"></cover-image>
         <cover-view class="video_bg_black">
         </cover-view>
        </cover-view>
       </video>
      2020-05-27
      赞
      回复
    • 大原儿
      大原儿
      2020-05-27
      .videos{
        width: 100%;
        height: 400rpx;
        /* position: fixed;
        top: 0; */
      }
      .videostyle{
        width: 100%;
        height: 100%;
      }
      .video_cover{
        width:100%;
        height:100%;
        position:fixed;
       }
       .video_play_icon{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:40px;
        height:40px;
        z-index:5
       }
       .video_bg_black{
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        background:rgba(0,0,0,.3);
       }
      2020-05-27
      赞
      回复
    查看更多(5)
  • 默
    默
    2020-05-27

    发下你的事件函数

    思路：直接在video标签覆盖一层cover-view然后点击隐藏并播放


    下面是我设置点击量的时候写的代码 可以参考一下

    wwxml
<video id="polyvVideo" class='liveDetail-video' enable-play-gesture='true' controls='controls' src='{{videoSrc}}' bindtimeupdate="timeUpdate">
    <cover-view wx:if="{{onvideoclick}}" class="liveDetail-video-frame" bindtap="videoClick"></cover-view>
  </video>
js
//设置播放量
  videoClick: function (e){
    var that = this;
    that.setData({
      onvideoclick: false,
    },function(){
      that.videoContext.play();
      var data = {
        user_id: app.globalData.uid,
        v_id: that.data.v_id,
      }
      util.publiceFn(config.DOMAIN_API.liveVideoClick, data);
    })
  },
    2020-05-27
    有用
    回复 10
    • 大原儿
      大原儿
      2020-05-27
      大神，你看看，我上面的是wxml文件，给cover-view绑定的bindplay事件，这边点击的时候，isShow给了false。让cover-view隐藏，然后播放视频，that.videoContext.play()的啊，跟大神你是同样的思路，可是，就是这样，开发者工具有时候会触发bindpause事件，有时候不触发，而真机上，会触发这个bindpause事件，那这个是因为video组件的原声播放按钮写错了么，我给的是false啊，不让他显示。真的不明白。
      2020-05-27
      赞
      回复
    • 默
      默
      2020-05-27回复大原儿
      发下代码片段
      2020-05-27
      赞
      回复
    • 大原儿
      大原儿
      2020-05-27
      大神，稍等一下 哈，没弄过代码片段，不好意思哈，我弄好了就发上来
      2020-05-27
      赞
      回复
    • 大原儿
      大原儿
      2020-05-27回复默
      <video class="videostyle" src="" controls show-center-play-btn="{{false}}" show-fullscreen-btn show-play-btn object-fit="fill" bindpause="bindpause" bindended="bindended" style="height:400px">
        <cover-view class="video_cover" wx:if="{{isShow}}" bindtap="bindplay">
         <cover-image src="/images/video_cover.png" mode="widthFix"></cover-image>
         <cover-image src="/images/video_play.png" mode="widthFix" class="video_play_icon"></cover-image>
         <cover-view class="video_bg_black">
         </cover-view>
        </cover-view>
       </video>
      2020-05-27
      赞
      回复
    • 大原儿
      大原儿
      2020-05-27回复默
      .videos{
        width: 100%;
        height: 400rpx;
        /* position: fixed;
        top: 0; */
      }
      .videostyle{
        width: 100%;
        height: 100%;
      }
      .video_cover{
        width:100%;
        height:100%;
        position:fixed;
       }
       .video_play_icon{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:40px;
        height:40px;
        z-index:5
       }
       .video_bg_black{
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        background:rgba(0,0,0,.3);
       }
      2020-05-27
      赞
      回复
    查看更多(5)
  • 大原儿
    大原儿
    2020-05-27

    对了。还有一个事情就是，我点击cover-view的时候，开发工具上有时候会触发bindpause事件。有时候不触发。真机上是一直有触发，而且是触发2次bindpause，这个又是为什么呢，更不明白了，求大神指教指教，谢谢

    2020-05-27
    有用
    回复 1
    • 大原儿
      大原儿
      2020-05-27
      有大神在么，可以给我这个小白提供点思路么，谢谢谢谢谢谢谢谢谢谢
      2020-05-27
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
cover-view按钮点击小程序开发组件视图容器