收藏
回答

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
    //设置播放量
      videoClickfunction (e){
        var that = this;
        that.setData({
          onvideoclickfalse,
        },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
      回复
登录 后发表内容
问题标签