视频播放微信小程序

Posted 2023-04-03 show_me_your_code

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了视频播放微信小程序相关的知识，希望对你有一定的参考价值。

2022年夏季《移动软件开发》实验报告

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、创建项目

填好项目名称、目录、AppID等信息后，点击确定即可创建项目了

创建好项目之后的初始界面如下：

2、页面配置

将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号，删除utils文件夹及其内部所有内容，删除pages文件夹下的logs目录及其内部所有内容，删除index.wxml和index.wxss中的全部代码，删除index.js中的全部代码，并且输人关键词page找到第二个选项按回车键让其自动补全函数，删除app.wxss中的全部代码，删除app.js中的全部代码，并且输人关键词app找到第一个选项按回车键让其自动补全函数

这些工作做好了之后，界面如图所示：

3、创建新文件夹存放微信小程序中用到的图片

创建新文件夹images，存放微信小程序中需要用到的图片play.png

4、导航栏设计

在app.json中修改导航栏标题和背景颜色。
app.json文件中需要修改的代码如下：


  "pages":[
    "pages/index/index"
  ],
  "window":
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle":"black"
  ,
  "style": "v2",
  "sitemapLocation": "sitemap.json"

其中"navigationBarBackgroundColor": “#987938”,是将背景颜色改为金棕色(#987938)，“navigationBarTitleText”: “口述校史”,是将所有页面的导航栏标题文本改为“口述校史”

此时微信小程序的预览效果如下图所示：

5、页面设计

我们在页面中总共有3个区域需要设计的，分别是区域1：视频播放器（用于播放指定的视频）、区域2：弹幕发送区域（包含文本输入框和发送按钮）、区域3：视频列表（垂直排列多个视频标题，点击不同的标题播放对应的视频内容。）

区域1（视频组件）需要使用组件来实现一个视频播放器。
在index.wxml中需要修改的代码片段如下：

 <!--区域1：视频播放器-->
 <video id ='myVideo' controls></video>

在index.wxss修改以下代码片段：

video
  width: 100%;

区域2（弹幕区域）需要使用组件实现一个单行区域，包括文本输入框和发送按钮。
在index.wxml文件中修改的代码片段如下：

<!-- 区域2：弹幕区域 -->
<view class='danmuArea'>
  <input type='text' placeholder='请输入弹幕内容'></input>
  <button>发送弹幕</button>
</view>

在index.wxss修改以下代码片段：

.danmuArea
  display: flex;                 /*flex模型布局*/
  flex-direction: row;           /*水平方向排列*/

input
  border: 1rpx solid #987938;    /*1rpx宽的实线棕色边框*/
  flex-grow: 1;                  /*扩张多余空间宽度*/
  height: 100rpx;                /*高度*/

button
  color: white;                  /*字体颜色*/
  background-color: #987938;     /*背景颜色*/

其中，display: flex;是设置flex模型布局，flex-direction: row;是设置水平方向排列，border: 1rpx solid #987938; 是设置1rpx宽的实线棕色边框，flex-grow: 1;是扩张多余空间宽度，height: 100rpx; 是设置高度，color: white;是设置字体颜色，background-color: #987938; 是设置背景颜色

此时微信小程序的预览效果如下图所示：

区域3（视频列表）需要使用组件实现一个可扩展的多行区域，每行包含一个播放图标和一个视频标题文本。当前先设计第一行效果，后续使用wx:for属性循环添加全部内容。
在index.wxml修改以下代码片段：

<!-- 第三个区域：视频列表 -->
<view class='videoList'>
  <view class='videoBar'>
    <image src='/images/play.png'></image>
    <text>这是一个测试标题</text>
  </view>
</view>

在index.wxss修改以下代码片段

.videoList
  width: 100%;/*宽度*/
  min-height: 400rpx;/*最小高度*/

.videoBar
  width: 95%;/*宽度*/
  display: flex;/*flex模型布局*/
  flex-direction: row;/*水平方向布局*/
  border-bottom: 1rpx solid #987938;/*1rpx宽的实线棕色边框*/
  margin: 10rpx;/*外边距*/

image
  width: 70rpx;/*宽度*/
  height: 70rpx;/*高度*/
  margin: 20rpx;/*外边距关*/

text
  font-size: 45rpx;/*字体大小*/
  color: #987938;/*字体颜色为棕色*/
  margin: 20rpx;/*外边距*/
  flex-grow: 1;/*扩张多余空间宽度*/

6、更新播放列表

在区域3对<view class='videoBar>组件添加wx:for属性，改写为循环展示列表。
在index.wxml修改以下代码片段：

<!--区域3：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="list" wx:key="videoindex" data-url="item.videoUrl" bindtap="playVideo">
    <image src='/images/play.png'></image>
    <text>item.title</text>
  </view>
</view>

然后在JS文件的data属性中追加list数组，用于存放视频信息。
在index.js修改以下代码片段：

Page(
  data: 
    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'
    
  ]
  ,
  )

此时已经可以展示全部视频列表了，微信小程序的预览效果如下图所示：

7、点击播放视频
在区域3对组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。
在index.wxml修改以下代码片段：

<!--区域3：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="list" wx:key="videoindex" data-url="item.videoUrl" bindtap="playVideo">
    <image src='/images/play.png'></image>
    <text>item.title</text>
  </view>
</view>

然后在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止。
在index.js修改以下代码片段：

onLoad: function (options) 
    this.videoCtx=wx.createVideoContext('myVideo')
  ,

接着添加自定义函数playVideo

在index.js文件中加入以下代码片段：

playVideo: function (e) 
    this.videoCtx.stop()
    // 停止播放之前正在播放的视频
    this.setData(
      src: e.currentTarget.dataset.url
    )
    // 更新视频地址
    this.videoCtx.play()
    // 播放新的视频
  ,

其中this.videoCtx.stop()是停止播放之前正在播放的视频，src: e.currentTarget.dataset.url是更新视频地址，this.videoCtx.play()是播放新的视频

运行效果如图所示：

8、发送弹幕
在区域1对组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮。
在index.wxml文件中修改以下代码片段：

<!--区域 1：视频播放器-->
<video id='myVideo' controls src='src' enable-danmu='true' danmu-btn='true'></video>

然后在区域2为文本输入框追加bindinput属性，用于获取弹幕文本内容；为按钮追加bindtap属性，用于触发点击事件。

在index.wxml中修改以下代码片段：

<!--区域 2：弹幕控制-->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

在对应的index.js文件中的data段中加入下面片段：

danmuTxt:''

此时可以发出红色文本的弹幕，运行效果如图6-13所示。

此时可见可以发送红色弹幕

如果希望发出随机颜色的弹幕内容，可以在JS文件中追加自定义函数getRandomColor
在index.js中加入以下代码片段：

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

上述代码可以随机生成一个十六进制的颜色，将其在原先需要录入color属性的地方调用即可实现彩色弹幕效果。

在index.js中修改以下代码片段：

sendDanmu:function(e)
    let text=this.data.danmuTxt
    this.videoCtx.sendDanmu(
      text:text,
      color:getRandomColor()
    )
  ,

此时可以发出彩色文本的弹幕，微信小程序的运行效果如下图所示：

三、程序运行结果

列出程序的最终运行结果及截图。

这是发送红色弹幕的运行结果：

这是发送随机彩色弹幕的运行结果：

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

1、实验过程中遇到的问题以及解决方法：

①问题1：在实验过程中，点击播放按钮没有反应

解决方法：后来知道是没有联网，连接上网络就可以播放了

②问题②：一开始我发现我只能播放一个视频，下面三个不能播放

解决方法：后来认真看代码才发现是我在index.wxml文件中忘了给视频播放地址src添加变量，添加上关于src的变量即可

2、收获和体会

①通过做这次的小实验，我掌握了视频列表的切换方法、视频自动播放方法和视频随机颜色弹幕效果的方法。

②这个实验很考验布局，就需要再wxss文件上话很长时间，所以在做完这个实验了之后，我对微信小程序的wxss文件有了很深刻的理解，也会熟练掌握了微信小程序的布局。

③这个实验和之前的两个实验有很大的区别就是逻辑事件变多了，例如点击切换播放视频，点击发送弹幕等等，所以通过这次的实验，我对.js文件有了更深的认识。

击播放按钮没有反应

解决方法：后来知道是没有联网，连接上网络就可以播放了

②问题②：一开始我发现我只能播放一个视频，下面三个不能播放

解决方法：后来认真看代码才发现是我在index.wxml文件中忘了给视频播放地址src添加变量，添加上关于src的变量即可

2、收获和体会

①通过做这次的小实验，我掌握了视频列表的切换方法、视频自动播放方法和视频随机颜色弹幕效果的方法。

3、对课程安排的建议：通过做了这三个实验，我觉得wxml文件是不难理解，不难写的，但是wxss和js文件就没有怎么容易懂了，所以如果老师能专门讲一下wxss和js文件的写法就更好了。

微信小程序--音频及视频播放

记录微信小程序音频及视频播放。

1.audio

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

// audio.js
Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext(‘myAudio‘)
  },
  data: {
    poster: ‘http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000‘,
    name: ‘此时此刻‘,
    author: ‘许巍‘,
    src: ‘http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46‘,
  },
//播放
  audioPlay: function () {
    this.audioCtx.play()
  },
//暂停
  audioPause: function () {
    this.audioCtx.pause()
  },
//设置当前播放时间在14秒
  audio14: function () {
    this.audioCtx.seek(14)
  },
//回到开头
  audioStart: function () {
    this.audioCtx.seek(0)
  }
})

2.video

默认宽度300px、高度225px

<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur" placeholder="输入文字"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>

function getRandomColor () {
  let rgb = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
// 0.0 ~ 1.0 之间的一个伪随机数。Math.random()。floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。toString() 方法可把一个逻辑值转换为字符串，并返回结果。
    color = color.length == 1 ? ‘0‘ + color : color
    rgb.push(color)
  }
// join() 方法用于把数组中的所有元素放入一个字符串。
  return ‘#‘ + rgb.join(‘‘)
}

Page({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext(‘myVideo‘)
  },
  inputValue: ‘‘,
    data: {
        src: ‘‘,
    danmuList: [
      {
        text: ‘第 1s 出现的弹幕‘,
        color: ‘#ff0000‘,
        time: 1
      },
      {
        text: ‘第 3s 出现的弹幕‘,
        color: ‘#ff00ff‘,
        time: 3
    }]
    },
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
//发送弹幕文字
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

以上是关于视频播放微信小程序的主要内容，如果未能解决你的问题，请参考以下文章

关于微信小程序在iOS下视频播放卡顿,无法播放问题

微信小程序（或uniapp）引入腾讯视频插件播放视频

微信小程序视频不能播放是啥原因？

微信小程序点击未看视频时自动播放,点击已看过的视频时处于暂停状态不能自动播放呢

微信小程序--音频及视频播放

如何使用微信小程序video组件播放视频