【微信小程序】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
        });

    }
相关推荐
<p> <span style="font-size:16px;color:#337FE5;"><strong>【为什么学习微信程序?】</strong></span> </p> <p> <span>  小程序开发为当下一种主流的开发形式,<span>小程序开发已经不仅仅局限于互联网行业,传统行业同样也有海量的需求,</span>掌握小程序开发不仅仅是掌握了一个新的开发技能,更可以增加大家的行业竞争力,<span>无论是在岗位的提升,求职面试、或者个人创业都是有很大的帮助。</span>掌握了小程序开发</span><span>小程序也是一门相对比较容易上手的技术,因为小程序开发容纳了前端、后端、运维等岗位所需掌握的知识但又极为简单好理解,对于刚刚入门或者小白用户是一个可以快速掌握并成为一名程序猿的不二途径。</span> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【推荐你学习这门课程的四大亮点】</strong></span> </p> <p style="font-size:13.3333px;"> <span style="color:#337FE5;">1、完整成体系的小程序开发知识:</span> </p> <p style="font-size:13.3333px;"> 对于没有学习过小程序开发的同学,本课程由浅入深系统的向同学们讲解了小程序开发知识,将<span style="font-size:13.3333px;">知识点串联起来,</span>让同学们可以更好更快的掌握小程序开发。 </p> <p> <span style="color:#337FE5;">2、视频及相关功能开发的掌握:</span> </p> <p> 借助于小程序开发使得视频方向的开发变的尤为简单,即使你是入门小白也可以熟练掌握小程序视频的相关开发,其中涉及了视频的常规控制如播放暂停等也有比较流行的视频弹幕功能,并结合了一下视频开发中相关的性能优化问题,可以让同学们通过本课程的学习对于视频类的开发有更深层次的认识。 </p> <p style="font-size:13.3333px;"> <span style="color:#337FE5;">3、打造智能闲聊小程序:</span> </p> <p style="font-size:13.3333px;"> 借助于网络上开放的人工智能接口,去实现智能闲聊功能,使得开发的过程不仅能够收获更多的知识也变得更加有趣。项目中虽然知识讲解了智能闲聊功能的调用,但是通过此功能的调用方法大家可以举一反三去使用更多的开发功能使得开发变得简单且有趣。 </p> <p> <span style="color:#337FE5;">4、掌握项目级开发知识及技巧:</span> </p> <p> 本课程中融入了两大当前比较主流的项目实例,视频功能和人工智能。通过项目的练习不仅可以让大家掌握较为主流的项目方向且融入很多的中高级语法及项目开发知识,如ES6+的一些语法和模块化、组件化开发的知识。 </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【课程内容设计】</strong></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  设计本门课程时考虑到很多同学可能没有小程序开发相关经验,本门课程将由浅入深,渐进式的讲解知识点。我把课程分为了三个阶段分别为:初次接触、基础入门、实战提升。</span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;color:#337FE5;">  1、</span><b><span style="color:#337FE5;">初次接触</span></b><span style="font-size:12px;color:#337FE5;"><span style="color:#337FE5;">:</span></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  主要给大家讲解小程序开发的相关知识,让大家在宏观上对向程序开发能有一定的概念。并且讲授的开发环境的搭建让大家对在开发前期做一个充分的热身。先激发起大家对线程序开发的热情,这样为下一步小程序的开发学习做一个铺垫。</span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;"> <span style="color:#337FE5;"> 2、</span></span><b><span style="color:#337FE5;">基础入门</span></b><span style="font-size:12px;color:#337FE5;"><span style="color:#337FE5;">:</span></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  这个阶段主要为入门的同学提供了一个比较全面的小程序开发基础知识知识汇总,并伴有实践的例子简单且易上手,让大家能够体验到小程序的开发乐趣,并未下一步的项目实战开发打定基础。</span> </p> <p style="text-indent:0px;"> <span><b>  <span style="color:#337FE5;">3、实战提升:</span></b></span> </p> <p style="text-indent:0px;"> <span style="font-size:12px;">  这个阶段为项目实践阶段,通过实战项目让大家深入了解和学习小程序开发,项目中同时融入了现在主流的视频内容,和有趣并贴近生活的智能闲聊功能,项目中涉及到的技术点也是由浅入深,同学们在掌握小程序的开发能力的同时也掌握了问题解决与深入学习的能力。</span> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【实战项目展示】</strong></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdnimg.cn/202008181214457971.jpg" alt="" /><img src="https://img-bss.csdnimg.cn/202008181214513368.jpg" alt="" /> </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#337FE5;"><strong>【学习完课程你将收获】</strong></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdnimg.cn/202008181213579208.jpg" alt="" /> </p>
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页