亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

              當(dāng)前位置:首頁 > IT技術(shù) > 微信平臺 > 正文

              小程序播放視頻(彈幕案例)
              2021-07-28 11:14:56

              <!--index.wxml-->
              <video src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4"></video>
              

              使用video標(biāo)簽即可顯示視頻,src為視頻地址。

              video微信小程序官網(wǎng)開發(fā)文檔地址 https://developers.weixin.qq.com/miniprogram/dev/component/video.html
              里面很詳細的介紹了各種視頻控制,及事件處理。
              如常用的
              指定視頻初始播放位置 initial-time
              是否顯示默認播放控件(播放/暫停按鈕、播放進度、時間) controls
              彈幕列表 danmu-list ,是否自動播放 autoplay ,是否循環(huán)
              loop ,靜音播放muted ,是否開啟手勢 enable-progress-gesture,視頻封面poster 。

              視頻API的使用

              視頻調(diào)用比較簡單,微信還推出了相關(guān)的API以方便我們使用視頻播放組件。我們可以通過VideoContext接口來控制當(dāng)前視頻,在使用該接口之前,需要使用wx.createVideoContext()創(chuàng)建對象。創(chuàng)建完對象后,我們可以使用下面的方法去做視頻的基本控制。

              官方開發(fā)文檔 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

              發(fā)送彈幕的一個例子:

              <!--index.wxml-->
              <video id="myVideo" src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4" enable-danmu danmu-btn controls ></video>
              
              <view >
                  <input bindblur="bindInputBlur"/>
                  <button bindtap="bindSendDanmu">發(fā)送彈幕</button>
              </view>
              
              //index.js
              //獲取應(yīng)用實例
              const app = getApp()
              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({
              
                inputValue: '',
                onReady:function(){
                  this.videoContext = wx.createVideoContext('myVideo')
                },
                
                bindSendDanmu:function() {
                  this.videoContext.sendDanmu({
                    text: this.inputValue,
                    color: getRandomColor()
                  })
                },
                bindInputBlur: function(e) {
                  this.inputValue = e.detail.value
                }
               
              
              })
              
              

              更具體一點的

              <!--index.wxml-->
              <video id="myVideo" src="http://video.usr.cn/d77d809cabc24f759f9b973868aa5c37/8b431426ce2541449370a2c71dea25eb-S00000001-200000.mp4" enable-danmu danmu-btn controls ></video>
              
              <input placeholder="在這里輸入你要發(fā)送的彈幕內(nèi)容" bindblur="bindInputBlur"/>
              <button type="warn" bindtap="bindSendDanmu">發(fā)送彈幕</button>
              <button type="primary" size="mini" bindtap="videoPlay">播放</button>
              <button type="primary" size="mini" bindtap="videoPause">暫停</button>
              <button type="primary" size="mini" bindtap="videoPlayBackRate">1.25倍快進</button>
              <button type="primary" size="mini" bindtap="videorequestFullScreen">全屏</button>
              <button type="primary" size="mini" bindtap="videoSeek0">重新播放</button>
              
              //index.js
              Page({
                /**
                 * 頁面的初始數(shù)據(jù)
                 */
                data: {
              
                },
                videoPlay() {
                  this.videoContext.play()
                },
              
                videoPause() {
                  this.videoContext.pause()
                },
              
                videoPlayBackRate() {
                  this.videoContext.playbackRate(1.5)
                },
              
                videorequestFullScreen() {
                  this.videoContext.requestFullScreen()
                },
              
                videoSeek0() {
                  this.videoContext.seek(0)
                },
              
                bindInputBlur: function (e) {
                  this.inputValue = e.detail.value
                },
              
                bindSendDanmu: function () {
                  this.videoContext.sendDanmu({
                    text: this.inputValue,
                    color: "#FFFFF"
                  })
                },
                onReady: function () {
                  this.videoContext = wx.createVideoContext('myVideo')
                }
              })
              

              效果:
              小程序播放視頻(彈幕案例)_程序員

              ?

              本文摘自 :https://blog.51cto.com/u

              開通會員,享受整站包年服務(wù)立即開通 >