视频播放效果：

视频列表的切换方法

视频自动播放方法

视频随机颜色弹幕效果

一。界面设计

1.创建项目videoDemo

将app.json文件内pages属性中的”pages/logs/logs“删除

删除utils文件夹及其内容

删除index.wxml和index.wxss中的全部代码

删除index.js全部代码并输入page找到

按回车键自动补全函数

同理删除app.js全部代码，并且输入关键词app找到第一个选项按回车键补全代码

1.导航栏设计

app.json

{"pages":["pages/index/index"],"window": {"navigationBarBackgroundColor": "#987938","navigationBarTitleText":"校史介绍"}}

2.视频组件设计

用<video>组件来实现一个视频播放器

<!--index.wxml-->
<!-- 视频播放器 -->
<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo" controls></video><!-- 弹幕控制区域 -->
<view class="danmuArea">
<!-- 弹幕输入框 -->
<input type="text" placeholder="请输入弹幕内容"></input>
<!-- 发送按钮 -->
<button>发送弹幕</button>
</view><!-- 视频列表 -->
<view class="videoList"><view class="videoBar"><image src="/images/play.png"></image><text>这是一个标题</text></view></view>

/**index.wxss**/
/* 视频组件样式 */
video{width:100%;
}
/* 弹幕控制样式 */
/* 弹幕区域整体样式 */
.danmuArea{display: flex;flex-direction: row;
}/* 文本输入框样式 */
input{border:1rpx solid #987938;height: 100rpx;flex-grow: 1;
}/* 发送按钮样式 */
button{color:white;background-color: #987938;
}/* 视频列表样式 */
.videoList{width:100%;min-height: 400rpx;
}
/* 单行列表区域样式 */
.videoBar{width: 95%;display: flex;flex-direction: row;margin: 10rpx;border-bottom: 1rpx solid #987938;
}
/* 播放图标样式 */
image{width: 70rpx;height: 70rpx;margin: 20rpx;
}
/* 文本标题样式 */
text{font-size: 45rpx;color: #987938;margin: 20rpx;flex-grow: 1;
}

二.逻辑实现

1.更新播放列表

视频数据来源于http://arch.ahnu.edu.cn ->口述校史->选一个视频->鼠标右键“复制视频地址”

然后将复制的视频地址复制到index.wxml中的<video id="myVideo" controls src="复制的视频地址连接"> </video>

例如：https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4

<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo" controls src="https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4"></video>

在<view class='videoBar'>组件中添加wx:for属性，改写为循环展示列表

// index.js
// 获取应用实例
Page({/* 页面的初始数据 */data: {list:[{id:'1001',title:'杨国宜先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'},{id:'1002',title:'舒华山先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/E/2F/3B/9F772666C25304984D615C18374_143C6C4F_747458A.mp4?e=.mp4'},{id:'1003',title:'唐成伦先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'},{id:'1004',title:'任兴田先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/4/E1/C6/3CD65724F5868782B1519CEAF86_5F7F0F43_6D89DE2.mp4?e=.mp4'}]},

在JS文件的data属性中追加list数组，用于存放视频信息

 data: {list:[{},{},{},{}]},

往list[{}，{}，{}，{}]中添加东西

<!--index.wxml-->
<!-- 视频播放器 -->
<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo" controls src="{{src}}"></video><!-- 弹幕控制区域 -->
<view class="danmuArea">
<!-- 弹幕输入框 -->
<input type="text" placeholder="请输入弹幕内容"></input>
<!-- 发送按钮 -->
<button>发送弹幕</button>
</view><!-- 视频列表 -->
<view class="videoList"><view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}"><image src="/images/play.png"></image><text>{{item.title}}</text><!-- item 表示数组list[{}]中的{}里面的元素 --></view>
</view>

2.点击播放视频

对<view class='videoBar'>组件添加data-url属性和bindtap属性。其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。

<!-- 视频列表 -->
<view class="videoList"><view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo"><image src="/images/play.png"></image><text>{{item.title}}</text><!-- item 表示数组list[{}]中的{}里面的元素 --></view>
</view>

打开调试器调试器显示自动循环4次

在JS文件中的onLoad函数中创建视频上下文，用于控制视频的播放和停止。

onLoad: function (options) {//创建一个视频上下文 也就是视频遥控器//创建一个视频遥控器 this.videoCtx//wx.createVideoContext('id', component)//<video id="myVideo" ...>this.videoCtx=wx.createVideoContext('myVideo')},

<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo" controls src="{{src}}"></video>

添加自定义函数playVideo

/* 自定义函数-视频播放 */playVideo:function(e){console.log(e)},

使用console.log(e)查看调试器console里查看数据

/* 自定义函数-视频播放 */playVideo:function(e){//停止之前正在播放的视频this.videoCtx.stop()//更新视频地址this.setData({src:e.currentTarget.dataset.url})//播放新的视频this.videoCtx.play()},

3.发送弹幕

对<video>组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示“发送弹幕”按钮

<!--index.wxml-->
<!-- 视频播放器 -->
<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo"  src="{{src}}" controls enable-danmu danmu-btn></video><!-- 弹幕控制区域 -->
<view class="danmuArea">
<!-- 弹幕输入框 -->
<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
<!-- 发送按钮 -->
<button bindtap="sendDanmu">发送弹幕</button>
</view><!-- 视频列表 -->
<view class="videoList"><view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo"><image src="/images/play.png"></image><text>{{item.title}}</text><!-- item 表示数组list[{}]中的{}里面的元素 --></view>
</view>

index.js

data: {danmuTxt:'',
..../* 更新弹幕内容 */getDanmu:function(e){this.setData({danmuTxt:e.detail.value})},/* 发送弹幕 */sendDanmu:function(e){let text = this.data.danmuTxt;this.videoCtx.sendDanmu({text:text,color:'red'})},

随机颜色的弹幕内容，可以在JS中追加自定义函数getRandomColor

/ index.js
// 获取应用实例
//生成随机颜色
function getRandomColor(){let rgb = []for(let i=0;i<3;i++){let color=Math.floor(Math.random()*256).toString(16) //不进位，转化成16进制//三目运算法color = color.length==1?'0'+color:colorrgb.push(color)}return '#'+rgb.join('')
}Page({  /*** 页面的初始数据*/data: {.......

/* 发送弹幕 */sendDanmu:function(e){let text = this.data.danmuTxt;this.videoCtx.sendDanmu({text:text,color:getRandomColor()})},

完整代码：

app.json：

{"pages":["pages/index/index"],"window": {"navigationBarBackgroundColor": "#987938","navigationBarTitleText":"校史介绍"}
}

index.wxml:

<!--index.wxml-->
<!-- 视频播放器 -->
<!-- controls组件提供相关的视频播放按钮 值可以为true或去掉 -->
<video id="myVideo"  src="{{src}}" controls enable-danmu danmu-btn></video><!-- 弹幕控制区域 -->
<view class="danmuArea">
<!-- 弹幕输入框 -->
<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
<!-- 发送按钮 -->
<button bindtap="sendDanmu">发送弹幕</button>
</view><!-- 视频列表 -->
<view class="videoList"><view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo"><image src="/images/play.png"></image><text>{{item.title}}</text><!-- item 表示数组list[{}]中的{}里面的元素 --></view>
</view>

index.wxss:

/**index.wxss**/
/* 视频组件样式 */
video{width:100%;
}
/* 弹幕控制样式 */
/* 弹幕区域整体样式 */
.danmuArea{display: flex;flex-direction: row;
}/* 文本输入框样式 */
input{border:1rpx solid #987938;height: 100rpx;flex-grow: 1;
}/* 发送按钮样式 */
button{color:white;background-color: #987938;
}/* 视频列表样式 */
.videoList{width:100%;min-height: 400rpx;
}
/* 单行列表区域样式 */
.videoBar{width: 95%;display: flex;flex-direction: row;margin: 10rpx;border-bottom: 1rpx solid #987938;
}
/* 播放图标样式 */
image{width: 70rpx;height: 70rpx;margin: 20rpx;
}
/* 文本标题样式 */
text{font-size: 45rpx;color: #987938;margin: 20rpx;flex-grow: 1;
}

index.js:

// index.js
// 获取应用实例
//生成随机颜色
function getRandomColor(){let rgb = []for(let i=0;i<3;i++){let color=Math.floor(Math.random()*256).toString(16) //不进位，转化成16进制//三目运算法color = color.length==1?'0'+color:colorrgb.push(color)}return '#'+rgb.join('')
}Page({  /* 页面的初始数据 */data: {danmuTxt:'',list:[{id:'1001',title:'杨国宜先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'},{id:'1002',title:'舒华山先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/E/2F/3B/9F772666C25304984D615C18374_143C6C4F_747458A.mp4?e=.mp4'},{id:'1003',title:'唐成伦先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'},{id:'1004',title:'任兴田先生口述校史实录',videoUrl:'https://arch.ahnu.edu.cn/__local/4/E1/C6/3CD65724F5868782B1519CEAF86_5F7F0F43_6D89DE2.mp4?e=.mp4'}]},/* 更新弹幕内容 */getDanmu:function(e){this.setData({danmuTxt:e.detail.value})},/* 发送弹幕 */sendDanmu:function(e){let text = this.data.danmuTxt;this.videoCtx.sendDanmu({text:text,color:getRandomColor()})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//创建一个视频上下文 也就是视频遥控器//创建一个视频遥控器 this.videoCtx//wx.createVideoContext('id', component)//<video id="myVideo" ...>this.videoCtx=wx.createVideoContext('myVideo')},/* 自定义函数-视频播放 */playVideo:function(e){//停止之前正在播放的视频this.videoCtx.stop()//更新视频地址this.setData({src:e.currentTarget.dataset.url})//播放新的视频this.videoCtx.play()},})

视频播放小程序-小程序媒体API-基础入门相关推荐

c语言程序乔奎,『C 基础入门』C语言的数据序列化
新推波形开秤才子惹眼,捕鱼球节频度驿亭翘板.封神崴瑞侧室佩带盘存寺里!契刻嘟囔笑窝明智发泡画策『C 基础入门』C语言的数据序列化?浓度满袋伴娘冷烫拿放杀戮行者酷爱,『C 基础入门』C语言的数据序列化伴 ...
java数据类型入门程序_「JAVA零基础入门系列」Day3 Java基本数据类型
前两篇已经将开发环境搭建完成,如果你已经按之前的教程按部就班的完成了部署,那么世界上最优秀的编程语言之一和世界上最优秀的IDE之一已经出现在你的电脑上(此处应有掌声),如果你还没入门,或者正在台阶上踱 ...
身份证校验程序（上）- 零基础入门学习Delphi48
身份证校验程序让编程改变世界 Change the world by program [caption id="attachment_2699" align="al ...
鱼油账号记录程序（续） - 零基础入门学习Delphi39
鱼油账号记录程序(续) 让编程改变世界 Change the world by program 课件同上一讲,这一讲主要演示编程操作和修改程序! [buy] 获得所有教学视频.课件.源代码等资源打包 ...
【黑马程序员】《Java基础入门》——02 面向对象
1 方法的初始化 1.1 类的基本概念 (1)属性:描述对象的特征(C++中的数据成员) (2)方法:描述对象的行为(C++中的成员函数) (3)类的内容:①成员变量 ②成员方法 ③成员内部类(Jav ...
workflow Airtable API基础入门使用 ios
workflow airtable基础教学前言由于本人工作要算账,但是我又是一个对数字不明感的人,同时记忆力又差,所以,我就需要一些简单的工具帮我完成这些. 最先是workfolw帮我减少每天算一 ...
新型零基础入门软件测试自学“骗局”来啦！培训机构才能给你最好学习质量？
小编热衷于收集整理资源,记录踩坑到爬坑的过程.希望能把自己所学,实际工作中使用的技术.学习方法.心得及踩过的一些坑,记录下来.也希望想做软件测试的你一样,通过我的分享可以少走一些弯路,可以形成一套 ...
Arduino UNO新手零基础入门学习教程博客汇总
写在开头最近在上Arduino的课,可以说Arduino对新手来说非常友好了,因为相比于51和32,Arduino的库函数下载就好,不需要自己去写,就很方便我的硬件设备这个是学校提供的硬件设备, ...
web api接口开发实例_小程序开发如何调用 API 接口,以豆瓣电影为例
API 调用是开发者在小程序开发过程中经常会遇到的问题,本期我们以为调用豆瓣电影 API 为例具体来看 API 的调用过程以及常见的一些问题. 测试用到的小程序是「电影周周看」,内容来自清华大学软件学 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...

视频播放小程序-小程序媒体API-基础入门