百度智能小程序 視頻

video 視頻

解釋：視頻（v3.70.0 起支持 同層渲染 ）。video 組件還提供豐富的 api 來控制視頻的播放、暫停、全屏、彈幕等，詳見 swan.createVideoContext 。

屬性說明

objectFit 有效值

direction 有效值

主流格式支持

主流編碼格式支持

示例 

在開發(fā)者工具中打開

代碼示例 1

<view class="wrap">
    <view class="card-area">
        <video
            style="width: 100%;"
            id="myVideo"
            title="這是title"
            src="{{src}}"
            initial-time="{{initialTime}}"
            duration="48"
            controls="{{controls}}"
            autoplay="{{false}}"
            loop="{{false}}"
            muted="{{voice}}"
            objectFit="{{objectFit}}"
            poster="{{posterSrc}}"
            page-gesture="{{pageGesture}}"
            direction="{{0}}"
            show-progress="{{progressGesture}}"
            show-fullscreen-btn="{{fullscreenBtn}}"
            enable-progress-gesture="{{false}}"
            danmu-list="{{danmuList}}"
            danmu-btn="{{true}}"
            enable-danmu="{{true}}"
            show-play-btn="{{playBtn}}"
            show-center-play-btn="{{centerPlayBtn}}"
            show-mute-btn="{{true}}"
            show-no-wifi-tip="{{noWifiTip}}"
            show-rate-btn="{{showRateBtn}}"
            show-vslide-btn-in-fullscreen="{{showVslideBtnInFullscreen}}"
            silent-play="{{silentPlay}}"
            vslide-gesture="{{true}}"
            vslide-gesture-in-fullscreen="{{true}}"
            enable-play-gesture="{{true}}"
            bindplay="videoPlay"
            bindpause="videoPause"
            binderror="videoError"
            bindended="videoEnded"
            bindwaiting="videoWaiting"
            bindtimeupdate="videoTimeupdate"
            bindfullscreenchange="fullscreen"
            bindloadedmetadata="loadedmetadata">
        </video>
    </view>
    <view class="swan-cells">
        <view class="swan-cell swan-cell_input">
            <view class="swan-cell__hd">
                <view class="swan-label">彈幕內(nèi)容</view>
            </view>
            <view class="swan-cell__bd">
                <input bindinput="bindInput" type="text" value="{=userMessage=}" placeholder="在此處輸入彈幕內(nèi)容" />
            </view>
        </view>
    </view>
    <view class="btn-area">
        <button class="page-body-button" type="primary" bindtap="sendDanmu">發(fā)送彈幕</button>

        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="initialTime">指定初始播放位置為20s(播放前點(diǎn)擊)</view>
            <view hover-class="hover" bindtap="controls">顯示默認(rèn)播放控件</view>
            <view hover-class="hover" bindtap="loop">設(shè)置循環(huán)播放</view>
        </view>

        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="voice">點(diǎn)擊{{voice ? '有音':'無音'}}</view>
            <view hover-class="hover" data-set="contain" bindtap="objectFit">包含容器</view>
            <view hover-class="hover" data-set="fill" bindtap="objectFit">填充容器</view>
        </view>

        <view class="page-section-btns bottom-border">
            <view hover-class="hover" data-set="cover" bindtap="objectFit">覆蓋容器</view>
            <view hover-class="hover" bindtap="pageGesture">開啟手勢調(diào)節(jié)亮度與音量</view>
            <view hover-class="hover" bindtap="fullscreenBtn">{{fullscreenBtn?'不顯示':'顯示'}}全屏按鈕</view>
        </view>

        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="progressGesture">去掉全屏播放時手勢控制進(jìn)度</view>
            <view hover-class="hover" bindtap="playBtn">{{playBtn ? '': '不'}}顯示視頻底部控制欄的播放按鈕</view>
            <view hover-class="hover" bindtap="centerPlayBtn">{{centerPlayBtn ? '': '不'}}顯示視頻中間的播放按鈕</view>
        </view>

        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="noWifiTip">wifi/4g浮層</view>
            <view hover-class="hover" bindtap="nextVideo">切換視頻地址</view>
        </view>

        <view class="page-section-btns bottom-border">
            <view hover-class="hover" bindtap="rateBtn">{{showRateBtn ? '隱藏' : '顯示'}}倍速播放按鈕</view>
            <view hover-class="hover" bindtap="vslideBtnInFullscreen">{{showVslideBtnInFullscreen ? '隱藏': '顯示'}}全屏模式下的側(cè)邊欄控件</view>
            <view hover-class="hover" bindtap="silentPlayMode">{{silentPlay ? '關(guān)閉': '開啟'}}無聲視頻模式</view>
        </view>
    </view>
</view>

Page({
    data: {
        current: 0,
        srcList: ['https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4', 'https://vd3.bdstatic.com/mda-ib0u8x1bvaf00qa8/mda-ib0u8x1bvaf00qa8.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D'],
        src: 'https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4',
        loop: false,
        voice: false,
        posterSrc: 'https://gss0.bdstatic.com/5foIcy0a2gI2n2jgoY3K/static/smartprogram-developer/img/video_cover.90f71a8.png',
        initialTime: 0,
        objectFit: '',
        pageGesture: false,
        fullscreenBtn: true,
        playBtn: true,
        centerPlayBtn: true,
        noWifiTip: true,
        danmuList: [{
            text: '第 1s 出現(xiàn)的彈幕',
            color: '#6895FF',
            time: 1
        }, {
            text: '第 3s 出現(xiàn)的彈幕',
            color: '#6895FF',
            time: 3
        }],
        sendInfo: '',
        userMessage: 'baidu',
        showRateBtn: false,
        showVslideBtnInFullscreen: true,
        silentPlay: false
    },
    onReady() {
        this.videoContext = swan.createVideoContext('myVideo');
    },
    initialTime() {
        this.setData({
            initialTime: 20
        });
    },
    controls() {
        this.setData({
            controls: !this.data.controls
        });
    },
    loop() {
        this.setData({
            loop: true
        });
        swan.showToast({
            title: '設(shè)置循環(huán)播放成功',
            icon: 'none'
        });
    },
    voice() {
        this.setData({
            voice: !this.data.voice
        });
    },
    objectFit(e) {
        this.setData({
            objectFit: e.currentTarget.dataset.set
        });
        console.log('objectFit', e.currentTarget.dataset.set);
    },
    pageGesture() {
        this.setData({
            pageGesture: true
        });
    },
    fullscreenBtn() {
        this.setData({
            fullscreenBtn: !this.data.fullscreenBtn
        });
    },
    playBtn() {
        this.setData({
            playBtn: !this.data.playBtn
        });
    },
    centerPlayBtn() {
        this.setData({
            centerPlayBtn: !this.data.centerPlayBtn
        });
    },

    noWifiTip() {
        this.setData({
            noWifiTip: !this.data.noWifiTip
        });
    },

    videoPlay(e) {
        console.log('video', e.type);
    },
    videoPause(e) {
        console.log('video', e.type);
    },
    videoEnded(e) {
        console.log('video', e.type);
    },
    videoError(e) {
        swan.showToast({
            title: '播放出錯......',
            icon: 'none'
        });
        console.log('video', e.type);
    },
    videoTimeupdate(e) {
        console.log('video', e.type);
    },
    videoWaiting(e) {
        console.log('video', e.type);
    },
    fullscreen(e) {
        console.log('fullscreenchange 參數(shù)是' + JSON.stringify(e));
    },
    loadedmetadata(e) {
        console.log('video', e.detail);
    },
    nextVideo(e) {
        let list = this.data.srcList;
        let current = (this.data.current + 1) % list.length;
        this.setData({
            src: list[current]
        });
        this.data.current = current;
    },
    bindInput(e) {
        this.data.userMessage = e.detail.value;
    },
    sendDanmu() {
        this.videoContext.sendDanmu({
            text: this.data.userMessage,
            color: '#f60'
        });
        this.setData({
            userMessage: ''
        });
    },
    rateBtn() {
        this.setData({
            showRateBtn: !this.data.showRateBtn
        });
    },
    vslideBtnInFullscreen() {
        this.setData({
            showVslideBtnInFullscreen: !this.data.showVslideBtnInFullscreen
        });
    },
    silentPlayMode() {
        this.setData({
            silentPlay: !this.data.silentPlay
        });
    }
});

設(shè)計(jì)指南

默認(rèn)情況，會在 video 組件的中間和左下角顯示 2 個 play-btn，請根據(jù)小程序自身需要合理配置。不建議同時使用 2 個 play-btn，過多元素會增加用戶理解成本。

代碼示例 2 - controls 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="{{src}}"
            controls="{{controls}}">
        </video>
    </view>
    <button hover-class="hover" type="primary" bindtap="controls">顯示默認(rèn)播放控件</button>
</view>

Page({
    data: {
        src: 'https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4',
        controls: true
    },
    controls() {
        this.setData({
            controls: !this.data.controls
        });
    }
})

圖片示例

代碼示例 3 - title 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4" rel="external nofollow"  rel="external nofollow" 
            title="全屏title">
        </video>
    </view>
</view>

圖片示例

代碼示例 4 - direction 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="{{src}}"
            direction="{{direction}}">
        </video>
    </view>
    <button data-direction="0" type="primary" bindtap="changeFullScreen">正常豎向</button>
    <button data-direction="90" type="primary" bindtap="changeFullScreen">屏幕順時針90度</button>
    <button data-direction="-90" type="primary" bindtap="changeFullScreen">屏幕逆時針90度</button>
</view>

Page({
    data: {
        src: 'https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4',
        direction: 0
    },
    changeFullScreen(e) {
        this.setData('direction', +e.target.dataset.direction);
    }
});

圖片示例

代碼示例 5 - show-progress 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4" rel="external nofollow"  rel="external nofollow" 
            show-progress="{{true}}">
        </video>
    </view>
</view>

圖片示例

代碼示例 6 - show-no-wifi-tip 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="video-wrap">
        <video
            style="width: 100%;"
            id="myVideo"
            src="{{src}}"
            show-no-wifi-tip="{{true}}">
        </video>
    </view>
</view>

Bug & Tip

• Tip：相關(guān) API：createVideoContext
• Tip：<video /> 默認(rèn)寬度 300px、高度 225px。Tip：v3.70.0 起 video 支持同層渲染，更多請參考 原生組件。
• Tip：同一頁面下的 video 標(biāo)簽不應(yīng)太多，建議不超過 5 個，視頻列表功能建議使用 image 列表，選中時替換為 video。
• Tip：避免多個 video 同時播放，視頻預(yù)覽建議使用 gif 方案，使用 video 會降低性能和體驗(yàn)。

Web 態(tài) Tip

Tip1：在部分瀏覽器下，視頻無法自動播放的解決方案

案例分析：出于用戶體驗(yàn)、節(jié)省流量等原因，iOS 的 Safari、版本號 66 及以上的 Chrome、以及大部分國產(chǎn)移動瀏覽器禁止視頻在非靜音狀態(tài)下自動播放。因此，Web 態(tài)針對 video 組件中 autoplay 屬性設(shè)置為 true 后做了如下處理：

• 對于 QQ、Android 微信、 QQ 瀏覽器等基于 X5 內(nèi)核的平臺，Web 態(tài)下設(shè)置的 autoplay = true 不生效，頁面進(jìn)入時，視頻組件上顯示播放按鈕供用戶主動點(diǎn)擊觸發(fā)播放。
• 對于其他非 X5 內(nèi)核的平臺，為保證頁面進(jìn)入時可自動播放，會默認(rèn)關(guān)閉聲音播放，并顯示“取消靜音”按鈕，供用戶主動開啟聲音。

由于瀏覽器種類眾多，如出現(xiàn)自動播放相關(guān)新問題，請將案例反饋給我們，我們將統(tǒng)一記錄并反饋進(jìn)展。

Tip2：視頻類資源地址必須有文件擴(kuò)展名（即文件后綴）

由于瀏覽器無法解析資源格式。因此對于視頻類資源，應(yīng)在地址中通過后綴名顯式聲明資源格式，否則可能會導(dǎo)致視頻無法正常播放：

• Web 態(tài) video 組件目前支持 mp4、mov、m4v、ogg、m3u8 等格式，參見上述“主流格式支持”小節(jié)。
• 當(dāng) video 組件的 src 屬性值沒有文件擴(kuò)展名，視頻會被按照 mp4 格式來進(jìn)行解碼播放。

Tip3：在部分瀏覽器下，視頻播放器會遮擋其他頁面元素 / 小窗播放問題的解決方案

案例分析：微信、百度 APP、UC 等瀏覽器實(shí)現(xiàn)了自身的播放器控件，劫持了默認(rèn)內(nèi)核提供的播放器樣式和邏輯，從而使得基于 H5 video 實(shí)現(xiàn)的 Web 態(tài) video 組件出現(xiàn)了以下問題：

• 在 Android 系統(tǒng)的微信平臺、百度 APP 和 UC 等國產(chǎn)移動瀏覽器下，Video 組件的播放器會覆蓋到頁面其他內(nèi)容之上，且無法通過 z-index 控制層級，從而導(dǎo)致一些交互失效（比如無法上下滑動觸發(fā)切換視頻）。
• 在 OPPO 手機(jī)下的百度 APP，會出現(xiàn)小窗播放。

解決方案：Web 態(tài)針對不同瀏覽器做了盡可能的修復(fù)，以解決此問題。已修復(fù)的包括 QQ、Android 微信、QQ 瀏覽器等基于 X5 內(nèi)核的平臺，百度 APP。但由于瀏覽器種類眾多，有可能存在我們暫未覆蓋到的情況。如仍遇到上述問題，請您將案例反饋給我們，我們將統(tǒng)一記錄并反饋進(jìn)展。