微信小程序视频播放器API

实验步骤

新建项目

新建一个空的微信小程序项目。

配置文件

1. 在pages页面下创建index.js、index.json、index.wxml和index.wxss文件。

2. 新建images文件夹，在文件夹下导入所需图片素材。

导航栏设计与实现

设计导航栏为金色，标题”口述校史“为白色。

在app.json文件中更改配置实现导航栏设计：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#987938",
    "backgroundColor": "#eeeeee"
  }
}

页面设计与实现

由上至下，分别视频播放区，弹幕发送区和视频列表区，各面板之间保留一定的间隔。

使用<video>标签实现视频播放区的功能：

<video id= 'myVideo'  controls src = '{{src}}'></video>

 

对应JavaScript函数实现视频跳转选择功能：

  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url,
    })
    this.videoCtx.play()
  },

添加wxss样式，在原有基础上添加视频摆放区边框，优化页面结构：

video{
  width : 99% ;
  border: 2px solid #987938;  
}

在原有基础上添加额外功能，点赞与投币功能：

对应wxml和js代码如下：

<view class="post-container">  
    <view class="action-icons">  
        <image src="{{likeIconPath}}" class="action-icon" bindtap="handleLike" mode="aspectFit"></image>            <text>{{likes}}</text> 
        <image src="{{coinIconPath}}" class="action-icon" bindtap="handleCoin" mode="aspectFit"></image>            <text>{{coins}}</text>
    </view>  
</view>
  handleLike: function() {  
    this.setData({  
      likes: this.data.likes + 1  
    });  
    if (this.data.likes > 0) {  
      this.setData({  
        likeIconPath: this.data.likedIconPath  
      });  
    }
  },  
  
  // 处理投币事件  
  handleCoin: function() {  
    this.setData({  
      coins: this.data.coins + 1  
    });  
    if (this.data.coins > 0) {  
      this.setData({  
        coinIconPath: this.data.coinedIconPath  
      });  
    }
  },

使用<input>标签和<button>标签实现弹幕的输入和发送功能

1. <view class= 'danmuArea'>
     <input class='bindinput' type = 'text' placeholder = '请输入弹幕内容' bindinput = 'getDanmu'></input>
     <button bindtap = 'sendDanmu'>发送弹幕</button>
   </view>

   getDanmu函数实现弹幕的获取和发送：

   getDanmu:function(e){
       this.setData({
         danmuTxt:e.detail.value,
       })
     },
     sendDanmu:function(e){
       let text = this.data.danmuTxt;
         this.videoCtx.sendDanmu({
           text:text,
           color:getRandomColor()
         });
     },

   getRandomColor()函数实现弹幕的随机颜色，通过产生随机数得到随机16机制色彩编码：

   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('')
   }

   修改wxss代码，实现页面优化：

   .danmuArea{
     display: flex;
     flex-direction: row;
     width: 280px;
     height: 40px;
     margin-left:20px ;
   }
   .bindinput{
     border: 2px solid rgb(105, 105, 105);
     padding: 8px;
     width: 160px;
     height: 15px;
     border-radius: 8px; 
   }
   button {  
     color: white;  
     background-color: #987938;   
     font-size: 16px;  
     text-align: center; 
     border: none; 
     border-radius: 8px; /* 边框圆角*/  
     cursor: pointer; /* 鼠标悬停时显示指针 */  
     margin-left: 8px;
     height: 42px;
   }

   1. 在原有基础上添加评论功能：

      使用<textarea>标签和<button>标签实现评论功能：

      <view class="container">  
        <view class="input-area">  
          <textarea placeholder="请输入你的评论..." bindinput="inputChange" data-key="comment" value="{{comment}}"></textarea>  
          <button bindtap="submitComment">提交评论</button>  
        </view>  
        <view class="comment-list">  
        <text class="plq">评论区</text>
          <block wx:for="{{comments}}" wx:key="index">  
            <view class="comment-item">  
              <!-- {{item.content}} - {{item.formattedTime}}  -->
              评论：{{item}}  
              <text>Time: {{formattedTime}}</text>
            </view>  
          </block>  
        </view>  
      </view>

      获取评论内容并发布，附带发表时间，js代码如下：

      inputChange: function(e) {  
        const key = e.currentTarget.dataset.key;  
        this.setData({  
          [key]: e.detail.value  
        });  
      },  
      // 提交评论  
      submitComment: function() {  
        if (this.data.comment.trim() !== '') {  
          const newComments = [...this.data.comments, this.data.comment];  
          this.setData({  
            comments: newComments,  
            comment: '' // 清空输入框  
          });  
          const timestamp = 1609459200000; 
          // 调用函数处理时间戳  
          this.setData({  
            formattedTime: this.formatTime(timestamp)  
          });  
        } else {  
          wx.showToast({  
            title: '评论不能为空',  
            icon: 'none'  
          });  
        }  
      } ,  
        formatTime: function(timestamp) {  
          const date = new Date(timestamp);  
          const year = date.getFullYear();  
          const month = String(date.getMonth() + 1).padStart(2, '0');  
          const day = String(date.getDate()).padStart(2, '0');  
          const hour = String(date.getHours()).padStart(2, '0');  
          const minute = String(date.getMinutes()).padStart(2, '0');  
          const second = String(date.getSeconds()).padStart(2, '0');  
          return `${year}-${month}-${day}`;  
        },

      wxss代码：

      .container {  
        padding: 20px;  
      }  
        
      .input-area {  
        margin-bottom: 20px;  
      }  
        
      textarea {  
        width: 260px;  
        height: 50px;  
        padding: 10px;  
        border: 1px solid #ccc;  
        border-radius: 5px;  
        margin-bottom: 10px;  
      }  

      1. 使用<image>标签和<text>标签实现视频列表功能

         <view class = 'videoList'>
         <text>视频列表</text>
           <view class = 'videoBar' wx:for = '{{list}}' wx:key = 'video{{index}}' data-url = '{{item.videoUrl}}' bindtap = 'playVideo'>
             <image class="tubiao" src = '/image/play.jpg'></image>
             <text>{{item.title}}</text>
           </view>
         </view>

         js代码：

         循环遍历数组输出视频列表

             title:'杨国宜先生口述校史实录',
             list: [
               {
                 id: '299371',
                 title: '杨国宜先生口述校史实录',
                 videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
               },
               {
                 id: '299396',
                 title: '唐成伦先生口述校史实录',
                 videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
               },
               {
                 id: '299378',
                 title: '倪光明先生口述校史实录',
                 videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
               },
               {
                 id: '299392',
                 title: '吴仪兴先生口述校史实录',
                 videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
               }
             ]

         wxss代码：

         .post-container {  
           padding: 20px;  
           display: flex;  
           flex-direction: column;  
           align-items: center;  
         }  
           
         .action-icons {  
           display: flex;  
           justify-content: center;  
           margin-bottom: 1px;  
         }  
           
         .action-icon {  
           width: 40px;   
           height: 40px; 
           margin: 0 10px; 
           cursor: pointer;  
         }  
           
         .stat-display {  
           font-size: 24px;  
           color: #333;  
         }  
           
         .stat-display text {  
           margin-right: 25px;  
         }

      2.