1.7 微信小程序-视频播放器-发送弹幕_微信小程序使用短剧播放器插件-CSDN博客

本文链接：https://blog.csdn.net/weixin_46672830/article/details/116011891

本文介绍了如何在微信小程序中创建一个视频播放器，并实现了弹幕发送功能。内容包括视频播放器页面制作，选择弹幕颜色的交互，以及Video插件的使用。详细讲解了video-detail和select-color两个页面的wxml、wxss和js代码，并展示了最终的页面实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、视频播放器

video-detail 视频播放器
select-color 发送弹幕

1. 页面制作
小脆筒

2. 选择弹幕颜色
小脆筒
2、 Video插件的使用

在这里插入图片描述

3. 相关代码

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