【微信小程式】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/ 

版權聲明：本文為部落客原創文章，轉載請附上博文連結！