一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 微信小程序實現視頻播放器發送彈幕

微信小程序實現視頻播放器發送彈幕

2022-03-09 16:02小脆筒style js教程

這篇文章主要為大家詳細介紹了微信小程序實現視頻播放器發送彈幕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現視頻播放器發送彈幕的具體代碼，供大家參考，具體內容如下

一、視頻播放器

  • video-detail 視頻播放器
  • select-color 發送彈幕

1. 頁面制作

微信小程序實現視頻播放器發送彈幕

2. 選擇彈幕顏色

微信小程序實現視頻播放器發送彈幕

3、 Video插件的使用

微信小程序實現視頻播放器發送彈幕

4. 相關代碼

app.json

//app.json
{
  "pages":[
    "pages/video-detail/video-detail",
    "pages/select-color/select-color",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "視頻播放器",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

二、video-detail 視頻播放器相關頁面代碼

video-detail.wxml

<!--pages/video-detail/video-detail.wxml-->
<view class="mainContent">
    <view class="mainList">
        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id && current_id == videoDetail.id}}">
            <view class="video">
                <video class="videoContent" id="videoId" show-center-play-btn="true" autoplay="true"
                    danmu-list="{{danmuList}}" danmu-btn enable-danmu
                 src="{{videoDetail.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video>
            </view>
        </view>
        <view class="playerInfo" data-src="{{videoDetail.videoUrl}}" wx:if="{{current_id =="" || current_id != videoDetail.id}}">
            <view class="video">
                <image class="playImg" src="/images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
                <image class="videoContent" src="{{videoDetail.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{videoDetail.id}}" data-index="videoId"/>
            </view>
        </view>
    </view>
    <!--彈幕-->
    <view class="danmu">
        <view class="danmu-input">
            <input class="weui-input" type="text" placeholder="請輸入彈幕" bindblur="bindInputblur"/>
        </view>
        <view class="danmu-btn">
            <button type="primary" bindtap = "bindSendDanmu">發送彈幕</button>
        </view>
        <view class="danmu-color">
            <view class="danmu-color-switch">
                <view class="weui-cell-bd">隨機顏色</view>
                <view class="weui-cell-ft">
                    <switch checked="true" type="switch" bindchange="switchChange"></switch>
                </view>
            </view>
            <view class="danmu-color-select" bindtap = "selectColor">
                <view class="weui-cell-bd">選擇顏色</view>
                <view class="weui-cell-ft">
                    <view class="selectColor" style="background-color: {{numberColor}};"></view>
                </view>
            </view>
        </view>
    </view>
</view>

video-detail.wxss

.mainContent{
  background: #ffffff;
  overflow: auto;
}
.mainList{
  width:100%;
  background: #ffffff;
  height: 396rpx;
}
.video{
  width:94%;
  height: 324rpx;
  margin-left: 20rpx;
  position: relative;
}
.videoContent{
  width:100%;
  height: 324rpx;
}
/*播放小圖標*/
.playImg{
  position: absolute;
  top: 46%;
  left:46%;
  width:64rpx;
  height: 64rpx;
}
/*彈幕*/
.danmu{
  width:100%;
}
.danmu-input{
  width:100%;
  height: 60rpx;
}
.weui-input{ 
  display: flex;
  width:94%;
  height: 60rpx;
  align-items: center;
  margin-left: 20rpx;
  border-radius: 8rpx;
  border:2rpx solid #cccccc;
  padding-left:10rpx;
  font-size: 28rpx;
}
.danmu-btn{
  width:100%;
  margin-top: 20rpx;
}
.danmu-color{
  width:100%;
  margin-top: 20rpx;
  border-top:2rpx solid #cccccc;
}
.danmu-color-switch,.danmu-color-select{
  display: flex;
  flex-direction: row;
  justify-content: space-between;/*兩端對齊*/
  align-items: center;
  margin: 20rpx 20rpx 0 20rpx;
}
.weui-cell-bd{
  font-size: 28rpx;
}
.weui-cell-ft{
  font-size: 28rpx;
}
.selectColor{
  width:80rpx;
  height: 80rpx;
  line-height: 100rpx;
}

video-detail.js

// pages/video-detail/video-detail.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    current_id:"",//當前播放視頻id
    videoDetail:{
      id:"1",
      "videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4",
      "poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"
    },
    //彈幕列表
    danmuList:[
      {
        text: "第1s出現的紅色彈幕",
        color: "#ff0000",
        time: 1
      },
      {
        text: "第2s出現的綠色彈幕",
        color: "#00ff00",
        time: 2
      },
      
    ],
    isRandomColor: true,// 默認隨機
    numberColor:"#ff0000",//默認紅色
    inputValue: "",//文本框輸入內容
     
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    
  },  
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function(){
    if(wx.getStorageSync("color")){
      this.setData({
        numberColor: wx.getStorageSync("color")
      })
    }
  },
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.videoContext = wx.createVideoContext("videoId")
  },
  //視頻列表點擊事件
  videoPlay:function(e){
    console.log(e)
    var id= e.currentTarget.dataset.index
    var currentId=e.currentTarget.id
    this.setData({
      current_id: currentId
    })
    var videoContext = wx.createVideoContext(id)
    videoContext.play()
  },
  //文本框失去焦點事件
  bindInputblur: function(e){
    // console.log(e.detail.value)
    this.data.inputValue = e.detail.value
  },
  //發送彈幕內容
  bindSendDanmu : function(e){
    //設置彈幕顏色
    var color=""
    if(this.data.isRandomColor){//隨機顏色
      color = this.getRandomColor()
    }else{
      color = this.data.numberColor
    }
    //發送彈幕
    this.videoContext.sendDanmu({
      text: this.data.inputValue,
      color:color
    })
  },
  //設置隨機顏色
  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("")
  },
  //switch開關切換事件
  switchChange: function(e){
    console.log(e)
    this.data.isRandomColor = e.detail.value

  },
  //選擇顏色
  selectColor:function(){
    wx.navigateTo({
      url: "/pages/select-color/select-color"
    })
  }
})

三、select-color 發送彈幕相關頁面代碼

select-color.wxml

<!--pages/select-color/select-color.wxml-->
<view class="page">
    <view class="page_bd">
        <view class="color-items">
            <block wx:for="{{colorItems}}">
                <view class="item" data-number="{{item.number}}" bindtap = "selectColor">
                    <view class="item-icon" style="background: {{item.number}};"></view>
                </view>
            </block>
        </view>
    </view>
</view>

select-color.wxss

/* pages/select-color/select-color.wxss */
.color-items{
  border-top: 1rpx solid #d9d9d9;
  border-left: 1rpx solid #d9d9d9;
}
.item{
  position: relative;
  float: left;
  padding: 20rpx; 
  width: 20%;
  box-sizing: border-box;
  border-right: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
}
.item-icon{
  display: block;
  width:100rpx;
  height: 100rpx;
  margin: 0 auto;
  box-shadow: 3px 3px 5px #bbbbbb;
}

select-color.js

// pages/select-color/select-color.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    colorItems:[
      { key: 1, color: " 白色 ", number: "#FFFFFF" },

      { key: 2, color: " 紅色 ", number: "#FF0000" },

      { key: 3, color: " 綠色 ", number: "#00FF00" },

      { key: 4, color: " 藍色 ", number: "#0000FF" },

      { key: 5, color: " 牡丹紅 ", number: "#FF00FF" },

      { key: 6, color: " 青色 ", number: "#00FFFF" },

      { key: 7, color: " 黃色 ", number: "#FFFF00" },

      { key: 8, color: " 黑色 ", number: "#000000" },

      { key: 9, color: " 海藍 ", number: "#70DB93" },

      { key: 10, color: " 巧克力色 ", number: "#5C3317" },

      { key: 11, color: " 藍紫色 ", number: "#9F5F9F" },

      { key: 12, color: " 黃銅色 ", number: "#B5A642" },

      { key: 13, color: " 亮金色 ", number: "#D9D919" },

      { key: 14, color: " 棕色 ", number: "#A67D3D" },

      { key: 15, color: " 青銅色 ", number: "#8C7853" },

      { key: 16, color: " 2號青銅色 ", number: "#A67D3D" },

      { key: 17, color: " 士官服藍色 ", number: "#5F9F9F" },

      { key: 18, color: " 冷銅色 ", number: "#D98719" },

      { key: 19, color: " 銅色 ", number: "#B87333" },

      { key: 20, color: " 珊瑚紅 ", number: "#FF7F00" },

      { key: 21, color: " 紫藍色 ", number: "#42426F" },

      { key: 22, color: " 深棕 ", number: "#5C4033" },

      { key: 23, color: " 深綠 ", number: "#2F4F2F" },

      { key: 24, color: " 深銅綠色 ", number: "#4A766E" },

      { key: 25, color: " 深橄欖綠 ", number: "#4F4F2F" },

      { key: 26, color: " 深蘭花色 ", number: "#9932CD" },

      { key: 27, color: " 深紫色 ", number: "#871F78" },

      { key: 28, color: " 深石板藍 ", number: "#6B238E" },

      { key: 29, color: " 深鉛灰色 ", number: "#2F4F4F" },

      { key: 30, color: " 深棕褐色 ", number: "#97694F" },

      { key: 32, color: " 深綠松石色 ", number: "#7093DB" },

      { key: 33, color: " 暗木色 ", number: "#855E42" },

      { key: 34, color: " 淡灰色 ", number: "#545454" },

      { key: 35, color: " 土灰玫瑰紅色 ", number: "#856363" },

      { key: 36, color: " 長石色 ", number: "#D19275" },

      { key: 37, color: " 火磚色 ", number: "#8E2323" },

      { key: 38, color: " 森林綠 ", number: "#238E23" },

      { key: 39, color: " 金色 ", number: "#CD7F32" },

      { key: 40, color: " 鮮黃色 ", number: "#DBDB70" },

      { key: 41, color: " 灰色 ", number: "#C0C0C0" },

      { key: 42, color: " 銅綠色 ", number: "#527F76" },

      { key: 43, color: " 青黃色 ", number: "#93DB70" },

      { key: 44, color: " 獵人綠 ", number: "#215E21" },

      { key: 45, color: " 印度紅 ", number: "#4E2F2F" },

      { key: 46, color: " 土黃色 ", number: "#9F9F5F" },

      { key: 47, color: " 淺藍色 ", number: "#C0D9D9" },

      { key: 48, color: " 淺灰色 ", number: "#A8A8A8" },

      { key: 49, color: " 淺鋼藍色 ", number: "#8F8FBD" },

      { key: 59, color: " 淺木色 ", number: "#E9C2A6" },

      { key: 60, color: " 石灰綠色 ", number: "#32CD32" },

      { key: 61, color: " 桔黃色 ", number: "#E47833" },

      { key: 62, color: " 褐紅色 ", number: "#8E236B" },

      { key: 63, color: " 中海藍色 ", number: "#32CD99" },

      { key: 64, color: " 中藍色 ", number: "#3232CD" },

      { key: 65, color: " 中森林綠 ", number: "#6B8E23" },

      { key: 66, color: " 中鮮黃色 ", number: "#EAEAAE" },

      { key: 67, color: " 中蘭花色 ", number: "#9370DB" },

      { key: 68, color: " 中海綠色 ", number: "#426F42" },

      { key: 69, color: " 中石板藍色 ", number: "#7F00FF" },

      { key: 70, color: " 中春綠色 ", number: "#7FFF00" },

      { key: 71, color: " 中綠松石色 ", number: "#70DBDB" },

      { key: 72, color: " 中紫紅色 ", number: "#DB7093" },

      { key: 73, color: " 中木色 ", number: "#A68064" },

      { key: 74, color: " 深藏青色 ", number: "#2F2F4F" },

      { key: 75, color: " 海軍藍 ", number: "#23238E" },

      { key: 76, color: " 霓虹籃 ", number: "#4D4DFF" },

      { key: 77, color: " 霓虹粉紅 ", number: "#FF6EC7" },

      { key: 78, color: " 新深藏青色 ", number: "#00009C" },

      { key: 79, color: " 新棕褐色 ", number: "#EBC79E" },

      { key: 80, color: " 暗金黃色 ", number: "#CFB53B" },

      { key: 81, color: " 橙色 ", number: "#FF7F00" },
    ]

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },
  //點擊，選中顏色
  selectColor(e){
    console.log(e)
    let number =e.currentTarget.dataset.number
    //存儲在本地
    wx.setStorageSync("color", number)
    //返回上一頁
    wx.navigateBack({
      delta: 1, // 回退前 delta(默認為1) 頁面
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }

})

四、頁面實現效果

微信小程序實現視頻播放器發送彈幕

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。

原文鏈接：https://blog.csdn.net/weixin_46672830/article/details/116011891

延伸 · 閱讀

精彩推薦
  • js教程原生js實現自定義滾動條組件

    原生js實現自定義滾動條組件

    這篇文章主要為大家詳細介紹了原生js實現自定義滾動條組件的開發，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一...

    蒲公英芽11562022-01-05
  • js教程js實現表格拖動選項

    js實現表格拖動選項

    這篇文章主要為大家詳細介紹了原生js實現表格拖動選項，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    愛笑萌娃3692022-03-06
  • js教程理解 TypeScript 的 Never 類型

    理解 TypeScript 的 Never 類型

    對于很多人來說，TypeScript 中的 never 類型比較神秘，它有什么作用？什么時候應該使用它？...

    前端充電寶4022022-02-25
  • js教程javascript實現固定側邊欄

    javascript實現固定側邊欄

    這篇文章主要為大家詳細介紹了javascript實現固定側邊欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    愛前端的茂茂3712022-01-20
  • js教程JS相冊圖片抖動放大展示效果的示例代碼

    JS相冊圖片抖動放大展示效果的示例代碼

    這篇文章主要介紹了JS相冊圖片抖動放大展示效果的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下...

    weixin_339631896772022-01-12
  • js教程JavaScript深拷貝的一些踩坑記錄

    JavaScript深拷貝的一些踩坑記錄

    這篇文章主要給大家介紹了關于JavaScript深拷貝的一些踩坑記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要...

    YDJFE6682022-02-19
  • js教程js閉包和垃圾回收機制示例詳解

    js閉包和垃圾回收機制示例詳解

    這篇文章主要給大家介紹了關于js閉包和垃圾回收機制的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，...

    丶Serendipity丶8172022-01-24
  • js教程javascript中閉包closure的深入講解

    javascript中閉包closure的深入講解

    這篇文章主要給大家介紹了關于javascript中閉包closure的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需...

    flydean11392022-01-25
主站蜘蛛池模板： 九九国产视频 | 舔比小说 | 精品久久伦理中文字幕 | 维修工的调教 | 奇米影视欧美 | 香蕉视频在线观看网址 | 天天干天天操天天碰 | 5g影院天天爽爽 | 深夜啪啪网站 | 成年人在线观看视频免费 | 久久精品国产只有精品 | 免费观看俄罗斯特黄特色 | 亚洲欧美精品一区天堂久久 | 天天白天天谢天天啦 | 青青草影院在线观看 | 99精品国产成人一区二区在线 | a毛片免费全部在线播放毛 a级在线看 | 日韩精品成人a在线观看 | 日本卡一卡2卡3卡4精品卡无人区 | 亚洲国产精品网站久久 | 久久理论片迅播影院一级 | 精品久久久久久久久免费影院 | 校花被老头夺去第一次动图 | 俄罗斯女人与公拘i交酡 | 婷婷综合七月激情啪啪 | 日日操综合 | 欧美国产精品 | 农村妇女野战bbxxx农村妇女 | 亚洲精品中文 | 欧美一级h | 四虎最新永久在线精品免费 | 亚洲AV久久无码精品九号 | 香蕉国产成版人视频在线观看 | 日韩永久在线观看免费视频 | 精品国产一级毛片大全 | 99久久999久久久综合精品涩 | 男人好大好硬好爽免费视频 | 国内精品福利丝袜视频_速 国内精品91久久久久 | japanese日本护士 | 五月天精品视频播放在线观看 | 男人晚上适合偷偷看的污污 |