小程序-video/視頻播放---part1:屬性及部分函數

微信小程序視頻播放和h5的video標簽相同， 格式為:<video></video>. 其相關屬性及其圖文信息解析如下：

 

按鈕相關：

controls  顯示默認播放控件（播放/暫停按鈕、播放進度、時間） 

autoplay  自動播放  如果加上這個屬性，包括彈幕在內的信息自動也自動顯示

 

彈幕相關：

danmu-btn  顯示控制彈幕按鈕

enable-danmu  顯示彈幕信息

danmu-list=“{{danmulist}}”  定義彈幕顯示信息

 

綁定函數相關：

bindplay=“bindplay”  綁定開始播放按鈕，以及繼續播放函數

bindpause=“bindpause” 暫停播放觸發函數

bindended=“bindended” 播放結束觸發函數

bindtimeupdate=“bindtimeupdate” 播放中觸發函，一般是獲取當前播放到時間以秒為單位：event.detail .currentTime

 

其他：

objectFit=“contain/fill/cover” 當視頻大小和video元素大小不一致時,contain：包含(默認)，fill：填充，cover：覆蓋  video標簽的默認的寬度300px、高度225px

src="{{src}}" 視頻播放地址

 

 

例子如下：

wxml:

<view >
  <video class='video' src="{{src}}" autoplay danmu-btn enable-danmu   controls  danmu-list="{{danmuList}}" 
bindplay='bindplay' bindpause='bindpause' bindended='bindend' bindtimeupdate="bindtimeupdate"
  ></video>
</view>

　wxjs:

Page({
 
    data: {
        src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    danmuList: [
      {
        text: '第 1s 出現的彈幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出現的彈幕',
        color: '#ff00ff',
        time: 3
    }]
    },
    bindplay:function(){//開始播放按鈕或者繼續播放函數
      console.log("開始播放")
    },
    bindpause:function(){//暫停播放按鈕函數
      console.log("停止播放")
    },
    bindend:function(){//播放結束按鈕函數
      console.log("播放結束")
    },
    bindtimeupdate:function(res){//播放中函數，查看當前播放時間等
      console.log(res)//查看正在播放相關變量
      console.log("播放到第"+res.detail.currentTime+"秒")//查看正在播放時間，以秒為單位
    }
})

　　

效果：  video標簽的元素設為width:100%后