古风名字,好看的小说君子以泽,辰东

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)小程序教程：wxapp媒體組件video

video

基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。
作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運(yùn)營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

視頻（v2.4.0 起支持同層渲染）。相關(guān)api：wx.createVideoContext

屬性	類型	默認(rèn)值	必填	說明	最低版本
src	string		是	要播放視頻的資源地址，支持網(wǎng)絡(luò)路徑、本地臨時路徑、云文件ID（2.3.0）	1.0.0
duration	number		否	指定視頻時長	1.1.0
controls	boolean	true	否	是否顯示默認(rèn)播放控件（播放/暫停按鈕、播放進(jìn)度、時間）	1.0.0
danmu-list	Array.		否	彈幕列表	1.0.0
danmu-btn	boolean	false	否	是否顯示彈幕按鈕，只在初始化時有效，不能動態(tài)變更	1.0.0
enable-danmu	boolean	false	否	是否展示彈幕，只在初始化時有效，不能動態(tài)變更	1.0.0
autoplay	boolean	false	否	是否自動播放	1.0.0
loop	boolean	false	否	是否循環(huán)播放	1.4.0
muted	boolean	false	否	是否靜音播放	1.4.0
initial-time	number	0	否	指定視頻初始播放位置	1.6.0
page-gesture	boolean	false	否	在非全屏模式下，是否開啟亮度與音量調(diào)節(jié)手勢（廢棄，見 vslide-gesture）	1.6.0
direction	number		否	設(shè)置全屏?xí)r視頻的方向，不指定則根據(jù)寬高比自動判斷	1.7.0
show-progress	boolean	true	否	若不設(shè)置，寬度大于240時才會顯示	1.9.0
show-fullscreen-btn	boolean	true	否	是否顯示全屏按鈕	1.9.0
show-play-btn	boolean	true	否	是否顯示視頻底部控制欄的播放按鈕	1.9.0
show-center-play-btn	boolean	true	否	是否顯示視頻中間的播放按鈕	1.9.0
enable-progress-gesture	boolean	true	否	是否開啟控制進(jìn)度的手勢	1.9.0
object-fit	string	contain	否	當(dāng)視頻大小與 video 容器大小不一致時，視頻的表現(xiàn)形式	1.0.0
poster	string		否	視頻封面的圖片網(wǎng)絡(luò)資源地址或云文件ID（2.3.0）。若 controls 屬性值為 false 則設(shè)置 poster 無效	1.0.0
show-mute-btn	boolean	false	否	是否顯示靜音按鈕	2.4.0
title	string		否	視頻的標(biāo)題，全屏?xí)r在頂部展示	2.4.0
play-btn-position	string	bottom	否	播放按鈕的位置	2.4.0
enable-play-gesture	boolean	false	否	是否開啟播放手勢，即雙擊切換播放/暫停	2.4.0
auto-pause-if-navigate	boolean	true	否	當(dāng)跳轉(zhuǎn)到本小程序的其他頁面時，是否自動暫停本頁面的視頻播放	2.5.0
auto-pause-if-open-native	boolean	true	否	當(dāng)跳轉(zhuǎn)到其它微信原生頁面時，是否自動暫停本頁面的視頻	2.5.0
vslide-gesture	boolean	false	否	在非全屏模式下，是否開啟亮度與音量調(diào)節(jié)手勢（同 page-gesture）	2.6.2
vslide-gesture-in-fullscreen	boolean	true	否	在全屏模式下，是否開啟亮度與音量調(diào)節(jié)手勢	2.6.2
ad-unit-id	string		是	視頻前貼廣告單元ID，更多詳情可參考開放能力視頻前貼廣告	2.8.1
poster-for-crawler	string		是	用于給搜索等場景作為視頻封面展示，建議使用無播放 icon 的視頻封面圖，只支持網(wǎng)絡(luò)地址
show-casting-button	boolean	false	否	顯示投屏按鈕。只安卓且同層渲染下生效，支持 DLNA 協(xié)議	2.10.2
picture-in-picture-mode	string/Array		否	設(shè)置小窗模式： push, pop，空字符串或通過數(shù)組形式設(shè)置多種模式（如： ["push", "pop"]）	2.11.0
picture-in-picture-show-progress	boolean	false	否	是否在小窗模式下顯示播放進(jìn)度	2.11.0
enable-auto-rotation	boolean	false	否	是否開啟手機(jī)橫屏?xí)r自動全屏，當(dāng)系統(tǒng)設(shè)置開啟自動旋轉(zhuǎn)時生效	2.11.0
show-screen-lock-button	boolean	false	否	是否顯示鎖屏按鈕，僅在全屏?xí)r顯示，鎖屏后控制欄的操作	2.11.0
bindplay	eventhandle		否	當(dāng)開始/繼續(xù)播放時觸發(fā)play事件	1.0.0
bindpause	eventhandle		否	當(dāng)暫停播放時觸發(fā) pause 事件	1.0.0
bindended	eventhandle		否	當(dāng)播放到末尾時觸發(fā) ended 事件	1.0.0
bindtimeupdate	eventhandle		否	播放進(jìn)度變化時觸發(fā)，event.detail = {currentTime, duration} 。觸發(fā)頻率 250ms 一次	1.0.0
bindfullscreenchange	eventhandle		否	視頻進(jìn)入和退出全屏?xí)r觸發(fā)，event.detail = {fullScreen, direction}，direction 有效值為 vertical 或 horizontal	1.4.0
bindwaiting	eventhandle		否	視頻出現(xiàn)緩沖時觸發(fā)	1.7.0
binderror	eventhandle		否	視頻播放出錯時觸發(fā)	1.7.0
bindprogress	eventhandle		否	加載進(jìn)度變化時觸發(fā)，只支持一段加載。event.detail = {buffered}，百分比	2.4.0
bindloadedmetadata	eventhandle		否	視頻元數(shù)據(jù)加載完成時觸發(fā)。event.detail = {width, height, duration}	2.7.0
bindcontrolstoggle	eventhandle		否	切換 controls 顯示隱藏時觸發(fā)。event.detail = {show}	2.9.5
bindenterpictureinpicture	eventhandler		否	播放器進(jìn)入小窗	2.11.0
bindleavepictureinpicture	eventhandler		否	播放器退出小窗	2.11.0
bindseekcomplete	eventhandler		否	seek 完成時觸發(fā)	2.12.0

direction 的合法值

值	說明	最低版本
0	正常豎向
90	屏幕逆時針90度
-90	屏幕順時針90度

object-fit 的合法值

值	說明	最低版本
contain	包含
fill	填充
cover	覆蓋

play-btn-position 的合法值

值	說明	最低版本
bottom	controls bar上
center	視頻中間

picture-in-picture-mode 的合法值

值	說明	最低版本
[]	取消小窗
push	路由 push 時觸發(fā)小窗
pop	路由 pop 時觸發(fā)小窗

提示

tip：`video 默認(rèn)寬度 300px、高度 225px，可通過 wxss 設(shè)置寬高。
tip：從 2.4.0 起 video 支持同層渲染。

支持的格式

格式	iOS	Android
mp4	√	√
mov	√	x
m4v	√	x
3gp	√	√
avi	√	x
m3u8	√	√
webm	x	√

支持的編碼格式

格式	iOS	Android
H.264	√	√
HEVC	√	√
MPEG-4	√	√
VP9	x	√

小窗特性說明

video 小窗支持以下三種觸發(fā)模式（在組件上設(shè)置 picture-in-picture-mode 屬性）：

push 模式，即從當(dāng)前頁跳轉(zhuǎn)至下一頁時出現(xiàn)小窗（頁面棧push）
pop 模式，即離開當(dāng)前頁面時觸發(fā)（頁面棧pop）
以上兩種路由行為均觸發(fā)小窗

此外，小窗還支持以下特性：

小窗容器尺寸會根據(jù)原組件尺寸自動判斷
點(diǎn)擊小窗，用戶會被導(dǎo)航回小窗對應(yīng)的播放器頁面
小窗出現(xiàn)后，用戶可點(diǎn)擊小窗右上角的關(guān)閉按鈕或調(diào)用 context.exitPictureInPicture() 接口關(guān)閉小窗

當(dāng)播放器進(jìn)入小窗模式后，播放器所在頁面處于 hide 狀態(tài)(觸發(fā) onHide 生命周期)，該頁面不會被銷毀。當(dāng)小窗被關(guān)閉時，播放器所在頁面會被 unload (觸發(fā) onUnload 生命周期)。

示例代碼

video標(biāo)簽認(rèn)寬度300px、高度225px，設(shè)置寬高需要通過wxss設(shè)置width和height。

示例代碼：

function getRandomColor () {
  let 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({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
    data: {
        src: '',
    danmuList: [
      {
        text: '第 1s 出現(xiàn)的彈幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出現(xiàn)的彈幕',
        color: '#ff00ff',
        time: 3
    }]
    },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindButtonTap: function() {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front','back'],
      success: function(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

相關(guān)api：wx.createVideoContext

Bug & Tip

tip:video組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的。
tip: 請勿在scroll-view中使用video組件。
tip:css動畫對video組件無效。

當(dāng)前題目：創(chuàng)新互聯(lián)小程序教程：wxapp媒體組件video
文章地址：http://www.fisionsoft.com.cn/article/dpsdide.html