运行效果
下面是整体界面：
弹幕展示：
收藏：
wxml
这里使用的后端地址，进行拼接
<view class="content">
<view class="bg">
<!-- <block wx:for="{
{movies}}"></block> -->
<view class="movie">
<view class="pic">
<!-- 根据id -->
<video src="http://127.0.0.1:8081/{
{movie.id}}.mp4" mode="aspectFit" id="myVideo" danmu-list="{
{danmuList}}" enable-danmu danmu-btn controls></video>
<!-- <image src="{
{movie.pic}}" mode="aspectFit"></image> -->
</view>
</view>
</view>
<view class="operate">
<view class="opr">
<view bindtap="haveSave">
<image class="save " src="{
{isClick?'/images/bar/collect_active.png':'/images/bar/collect.png'}}" style="width: 12px;height: 12px;padding-top: 1px;"></image>
<text class="saveText">{
{isClick?'取消':'收藏'}}</text>
</view>
</view>
<view class="opr">
<view class="weui-cell__bd">
<input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
<view class="opr"> <button bindtap="bindSendDanmu" class="page-body-button" size="mini" type="primary" formType="submit">发送弹幕</button></view>
</view>
<view class="operate">
<view class="opr">{
{movie.name}}</view>
<view class="opr">{
{movie.movieArea}}</view>
<view class="opr">{
{movie.movieLength}}min</view>
</view>
<view class="intro">
影片简介：
{
{movie.movieIntroduction}}
<view>
<image src="http://127.0.0.1:8181/{
{movie.moviePoster}}" mode="widthFix" style="width:100%;"></image>
</view>
<view>
<image src="http://127.0.0.1:8181/{
{movie.moviePictures0}}" mode="widthFix" style="width:100%;"></image>
</view>
<view>
<image src="http://127.0.0.1:8181/{
{movie.moviePictures1}}" mode="widthFix" style="width:100%;"></image>
</view>
</view>
<view class="play" bindtap="bindPlay">
立即播放
</view>
</view>
wxss
.content{
font-family: "Microsoft YaHei";
}
.bg{
width:100%;
background-color: #3F544F;
height: 100%;
}
.movie{
display: flex;
flex-direction: row;
padding-top:10px;
}
.pic video{
width:750rpx;
height: 250px;
}
.name{
color: #ffffff;
}
.desc{
font-size: 12px;
color: #f2f2fe;
height: 28px;
line-height: 28px;
}
.operate{
margin-top:20px;
display: flex;
flex-direction: row;
padding-bottom: 10px;
}
.opr{
width:170px;
height: 30px;
border: 1px solid #F0F0F0;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #000000;
background-color: #F0F0F0;
border-radius:3px;
font-size: 13px;
}
.intro{
font-size: 13px;
line-height: 25px;
margin:10px;
}
.play{
position: fixed;
bottom: 0px;
width: 100%;
height: 40px;
background-color: #4585aa;
text-align: center;
line-height: 40px;
font-size: 14px;
color: #ffffff;
}
.weui-cell__bd{
text-align: center;
}
.weui-cells{
margin-top: 80rpx;
text-align: left;
}
js
function getRandomColor () {
const 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('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
data:{
movie:{
},
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}],
movieId:0,
isClick:false,
movieCollect:[]
},
onLoad:function(e){
this.loadMovieDetail(e);
},
// 加载电影详细数据（根据id）
loadMovieDetail:function(e){
var page = this;
wx.request({
// 请求这个电影的数据
url: 'http://127.0.0.1:8181/sysMovie/find/'+e.id,
header:{
'Content-Type':'application/json',
'token':wx.getStorageSync('token')
},
success:function(res){
// console.log(e.id)
console.log(res);
var movieList = res.data;
console.log(movieList);
var subject = movieList.data;
var movie = new Object();
//电影名称
movie.id = subject.movieId;
// movieID = movie.id ;
// console.log("movieID", movieID);
movie.name = subject.movieName;
movie.movieArea=subject.movieArea;
movie.movieLength = subject.movieLength;
movie.releaseDate = subject.releaseDate;
movie.movieIntroduction = subject.movieIntroduction;
// 海报信息,["/images/movie/2022/06/01/1.jpg"]解析为/images/movie/2022/1.jpg
movie.moviePoster = JSON.parse(subject.moviePoster)[0];
// 显示两张图片
movie.moviePictures0 = JSON.parse(subject.moviePictures)[0];
movie.moviePictures1 = JSON.parse(subject.moviePictures)[1];
console.log(movie)
var movieCollect= new Array();
movieCollect=wx.getStorageSync('movieCollect');
var temp = false;
for(var i in movieCollect){
// console.log("movieCollect[i].id",movieCollect[i].id);
// console.log(" movie.id movieId", movie.id );
// 根据id进行比较，就是如果已经收藏则显示取消收藏按钮；
// 如果是未收藏，则显示收藏按钮
if(movieCollect[i].id== movie.id ){
temp = true;
page.setData({
isClick:true
});
}
}
// 保存用户的观看影片历史
var movieHistory= new Array();
// 存入本地缓存的数据
if(wx.getStorageSync('movieHistory') ){
// 先保存起来
movieHistory=wx.getStorageSync('movieHistory')
}else{
// movieCollect没有这个，则为空
movieHistory=[]
}
// movie本页的电影基本信息
// 加入Array中（）
movieHistory.push(movie);
// 存入缓存，覆盖
wx.setStorageSync('movieHistory', movieHistory);
page.setData({
movie:movie});
page.setData({
movieId: subject.movieId});
//
console.log(movie)
}
})
},
// 获得弹幕输入框的数据
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
// 发送弹幕的数据
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
} ,
// 播放电影
bindPlay: function() {
this.videoContext.play()
},
//收藏
haveSave(e){
// console.log(e);
var page = this;
if(!this.data.isClick == true){
var movieCollect= new Array();
// 存入本地缓存的数据
if(wx.getStorageSync('movieCollect') ){
// 先保存起来
movieCollect=wx.getStorageSync('movieCollect')
}else{
// movieCollect没有这个，则为空
movieCollect=[]
}
var movie = new Object();
// 本页的电影基本信息
movie=this.data.movie
movie.flag = true
// 加入Array中（）
movieCollect.push(movie);
// 存入缓存，覆盖
wx.setStorageSync('movieCollect', movieCollect);
wx.showToast({
title: '已收藏',
});
}else{
var movieCollect= new Array();
// 存入本地缓存的数据
if(wx.getStorageSync('movieCollect')){
// 先保存起来
movieCollect=wx.getStorageSync('movieCollect')
}else{
// movieCollect没有这个，则为空
movieCollect=[]
}
var movie = new Object();
// 本页的电影基本信息
movie=this.data.movie
//
for(var i in movieCollect){
if(movieCollect[i].id==this.data.movie.movieId){
movieCollect.splice(i,1)
}
}
movieCollect.pop(movie);
// 存入缓存，覆盖
wx.setStorageSync('movieCollect', movieCollect);
wx.showToast({
title: '已取消收藏',
})
}
// 设置点击
this.setData({
isClick:!this.data.isClick
})
},
})