【微信小程序】video视频组件问题

1、 video 封面poster图片在真机IOS下会被撑大,不自适应。必须按照比例返回固定比例图片大小的图片,这个在不同机型上很难办到

2、seek(0)以后,再pause(),但是这样做会出现另外的bug: 
第一次播放时,播放当前视频,其他视频会一起加载 
除了第一次播放,虽然实现了伪停止效果,但是封面图会不见了 
cover-image 里的图片不支持放大吗?

3、 我在video 中放了个cover-view,cover-image中放了张图片,覆盖video未播放时的poster背景图,video的宽度是300px * 225px 的, img的是 200* 113px的,设置img属性也为width:300px,height:225px,模拟器上没问题,真机上img一直是200 * 113,不能拉伸。而且原生的播放和时间都被覆盖了

<video id="myVideo"  class="video-xx" src="{{videoUrl}}" controls>
<cover-view class="controls">
<cover-image class="img"  src="{{img}}" />
</cover-view>
</video>


4、mp4视频用video组件播放会卡顿、绿屏,尤其是在快进、拖动时间条时.在video组件上,加 试试加个custom-cache=”{{false}}”属性,可以完美解决

5、 video封面: poster 
使用的poster属性,开发工具上图片闪一下就没了。在video里用 
cover-view和cover-image,开发工具里正常显示,但是图片不能自适应

6、video层级太高 顶部导航固定上滑会出现 覆盖现象怎么解决。

目前暂无法解决,下个版本会支持cover-view代替Fixed的元素来解决

video组件在填写poster属性后..转发可能引起小程序崩溃. 
在一个页面内,放置2个以上的填写了poster属性的video组件, 
之后在android端转发会引起小程序崩溃…不知道为什么…

7 、设置的是不自动播放一打开页面所有视频就开始发请求加载。我想做的是点哪个哪个播放,并且是在当前页面播放。

<view class="container">

    <scroll-view scroll-y="true" class="container">
        <view class="zan-card video-item" wx:for="{{videos}}">  
            <view class="feed-intro zan-c-gray-darker zan-font-16">
                <text class="feed-txt">{{item.intro}}</text>
            </view>
            <view class="feed-content">
                <view class="video">
                    <video id="video{{index}}" data-id="{{index}}" src="{{item.videoUrl}}" objectFit="contain" poster="{{item.coverUrl}}" controls></video>
                </view>
            </view>

        </view>
    </scroll-view>
</view>


但是有几个问题,问题为: 
1、设置的是不自动播放一打开页面所有视频就开始发请求加载。我想做的是点哪个哪个播放,并且是在当前页面播放。 
2、我看规范说不能在score-view中用video 会有什么问题吗。我想做的就是在当前页面播放。 
3、如何点击当前视频其他视频暂停。我得代码如下。

startPlay: function (e) {
        var curVideoId = e.currentTarget.id;

        if (this.data.prevVideoId) {
            var prevV = wx.createVideoContext(this.data.prevVideoId);
            prevV.pause()

        }

        var videoContext = wx.createVideoContext(curVideoId);

        videoContext.play();
        this.setData({
            prevVideoId: curVideoId
        });

    }


--------------------- 
作者:小平果118 
来源:CSDN 
原文:https://blog.csdn.net/i10630226/article/details/78695078/ 
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值