以下將展示微信小程序之媒體組件video源碼官方組件能力商佑，組件樣式僅供參考帽驯，開發(fā)者可根據(jù)自身需求定義組件樣式我注，具體屬性參數(shù)詳見小程序開發(fā)文檔移斩。
功能描述：
視頻（v2.4.0 起支持同層渲染）。
屬性說明：
Bug& Tip
1.tip：`video 默認寬度 300px咬腋、高度 225px羹膳，可通過wxss 設置寬高。
2.tip：從 2.4.0 起 video 支持同層渲染根竿，更多請參考原生組件使用限制
3.tip:若當前組件所在的頁面或全局開啟了 enablePassiveEvent 配置項陵像，該內置組件可能會出現(xiàn)非預期表現(xiàn)（詳情參考enablePassiveEvent 文檔）
支持的格式
?
支持的編碼格式
小窗特性說明
video小窗支持以下三種觸發(fā)模式（在組件上設置 picture-in-picture-mode 屬性）：
1.push模式，即從當前頁跳轉至下一頁時出現(xiàn)小窗（頁面棧push）
2.pop模式寇壳，即離開當前頁面時觸發(fā)（頁面棧pop）
3.以上兩種路由行為均觸發(fā)小窗
此外醒颖，小窗還支持以下特性：
1.小窗容器尺寸會根據(jù)原組件尺寸自動判斷
2.點擊小窗，用戶會被導航回小窗對應的播放器頁面
3.小窗出現(xiàn)后壳炎，用戶可點擊小窗右上角的關閉按鈕或調用context.exitPictureInPicture() 接口關閉小窗
當播放器進入小窗模式后泞歉，播放器所在頁面處于 hide 狀態(tài)(觸發(fā) onHide 生命周期)，該頁面不會被銷毀匿辩。當小窗被關閉時腰耙，播放器所在頁面會被 unload (觸發(fā) onUnload 生命周期)。
DRM加密播放
1.小程序開發(fā)者獲取到 DRM 加密的視頻地址铲球、身份認證 url挺庞、license url
2.使用 video 標簽將以上幾個參數(shù)填入
3.小程序確認該 video 為 DRM 視頻源，進行 DRM 設備身份認證并且獲取播放許可證
4.設備身份認證通過并獲取播放許可證之后稼病，由 DRM底層進行解密播放
示例代碼
JAVASCRIPT
function getRandomColor() {
? const rgb = []
? for (let i = 0; i < 3; ++i) {
? ? let color = Math.floor(Math.random() * 256).toString(16)
? ? color = color.length === 1 ? '0' + color : color
? ? rgb.push(color)
? }
? return '#' + rgb.join('')
}
Page({
? onShareAppMessage() {
? ? return {
? ? ? title: 'video',
? ? ? path: 'page/component/pages/video/video'
? ? }
? },
? onReady() {
? ? this.videoContext = wx.createVideoContext('myVideo')
? },
? onHide() {
? },
? inputValue: '',
? data: {
? ? src: '',
? ? danmuList:
? ? [{
? ? ? text: '第 1s 出現(xiàn)的彈幕',
? ? ? color: '#ff0000',
? ? ? time: 1
? ? }, {
? ? ? text: '第 3s 出現(xiàn)的彈幕',
? ? ? color: '#ff00ff',
? ? ? time: 3
? ? }],
? },
? bindInputBlur(e) {
? ? this.inputValue = e.detail.value
? },
? bindButtonTap() {
? ? const that = this
? ? wx.chooseVideo({
? ? ? sourceType: ['album', 'camera'],
? ? ? maxDuration: 60,
? ? ? camera: ['front', 'back'],
? ? ? success(res) {
? ? ? ? that.setData({
? ? ? ? ? src: res.tempFilePath
? ? ? ? })
? ? ? }
? ? })
? },
? bindVideoEnterPictureInPicture() {
? ? console.log('進入小窗模式')
? },
? bindVideoLeavePictureInPicture() {
? ? console.log('退出小窗模式')
? },
? bindPlayVideo() {
? ? console.log('1')
? ? this.videoContext.play()
? },
? bindSendDanmu() {
? ? this.videoContext.sendDanmu({
? ? ? text: this.inputValue,
? ? ? color: getRandomColor()
? ? })
? },
? videoErrorCallback(e) {
? ? console.log('視頻錯誤信息:')
? ? console.log(e.detail.errMsg)
? }
})
WXML
<view class="page-body">
? <view class="page-section tc">
? ? <video
? ? ? id="myVideo"
? ? ? src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
? ? ? binderror="videoErrorCallback"
? ? ? danmu-list="{{danmuList}}"
? ? ? enable-danmu
? ? ? danmu-btn
? ? ? show-center-play-btn='{{false}}'
? ? ? show-play-btn="{{true}}"
? ? ? controls
? ? ? picture-in-picture-mode="{{['push', 'pop']}}"
? ? ? bindenterpictureinpicture='bindVideoEnterPictureInPicture'
? ? ? bindleavepictureinpicture='bindVideoLeavePictureInPicture'
? ? ></video>
? ? <view style="margin: 30rpx auto" class="weui-label">彈幕內容</view>
? ? <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此處輸入彈幕內容" />
? ? <button style="margin: 30rpx auto"? bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">發(fā)送彈幕</button>
? ? <navigator style="margin: 30rpx auto"? url="picture-in-picture" hover-class="other-navigator-hover">
? ? ? <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button>
? ? </navigator>
? </view>
</view>
版權聲明：本站所有內容均由互聯(lián)網(wǎng)收集整理选侨、上傳掖鱼，如涉及版權問題，請聯(lián)系我們第一時間處理援制。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
