1. 程式人生 > >【微信小程式】video視訊元件問題

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

    }