完成视频弹幕功能

api/video.js

@@ -24,5 +24,13 @@ export const apiVideoPlayLog=params=>{
 }
 
 /**
- * 视频点赞
- */
+ * 视频弹幕
+ * @param content
+ * @param seconds
+ * @param primary_id 视频id
+ * @param source 来源：1-视频社区 2-路演视频
+ * @param source_agent 来源平台：1:小程序、2:小程序(pc)、3:公众号、4:官网web(pc)
+ */
+export const apiVideoDanmuSend=params=>{
+    return httpPost('/bullet_chat/add',{source_agent:1,...params})
+}

components/videoBox/videoBox.vue

@@ -4,17 +4,44 @@
             autoplay
             object-fit="contain"
             show-mute-btn
-            show-background-playback-button
             enable-play-gesture
             :poster="videoInfo.cover_img_url"
             :src="videoInfo.video_url"
             :id="videoInfo.community_video_id"
             @ended="handleVideoEnd"
+            @play="handleVideoPlay"
             @pause="handleVideoPause"
             @timeupdate="handleTimeUpdate"
+            @fullscreenchange="handleFullscreenchange"
+            @controlstoggle="handleControlstoggle"
             v-if="videoInfo.id==curVideoId"
         >
-            <view class="video-inner-right-box">
+
+            <!-- 弹幕滚动模块 -->
+            <view class="danmu-scroll-box" v-show="!closeDM">
+                <view 
+                    :class="[
+                        'danmu-item',
+                        play?'animat-run':'animat-pause',
+                        item.user_id==selfUserid?'border':''
+                    ]"
+                    v-for="item in danmuList"
+                    :key="item.id"
+                    :style="{color:item.color,top:item.top,animationDuration:item.speed+'s'}"
+                >{{item.content}}</view>
+            </view>
+
+            <view class="video-inner-right-box" v-if="isShowControls">
+                <!-- 切换音频播放按钮 -->
+                <view class="change-music-icon" @click="handleChangeMusic"></view>
+                <!-- 弹幕控制按钮 -->
+                <view class="video-danmu-control-box">
+                    <view class="show-btn" v-if="!closeDM" @click.stop="closeDM=true"></view>
+                    <view class="close-btn" v-else @click.stop="closeDM=false"></view>
+                    <view class="send-btn" v-if="!closeDM" @click.stop="showInput=true">发弹幕</view>
+                </view>
+                  
+                <!-- 倍速控制按钮 -->
                 <view class="video-speed-btn" @click.stop="showSpeedOpt=true">倍速</view>
             </view>
             
@@ -28,7 +55,7 @@
                     @click.stop="handleVideoSpeedChange(item)"
                 >{{item}}X</view>
             </view>
-        
+            
         </video>
         <image @click="handelClickPlay" v-else class="poster" :src="videoInfo.cover_img_url" mode="aspectFill" lazy-load/>
 
@@ -38,11 +65,11 @@
                 <view class="left" @click.stop="showInput=true"></view>
                 <view class="right" @click.stop="closeDM=true"></view>
             </view>
-            <view class="small-box" v-else @click.stop="closeDM=false"></view>
+            <view class="small-box" v-else @click.stop="handleShowDM"></view>
         </view>
         
         <!-- 弹幕输入弹窗 -->
-        <view class="flex danmu-input-box" v-if="showInput">
+        <view class="flex danmu-input-box" :style="{bottom:keyboardheight+'px',paddingLeft:isFullScreen?safeAreaTop+17+'px':'34rpx'}" v-if="showInput">
             <view class="flex input-box">
                 <input 
                     type="text" 
@@ -52,18 +79,21 @@
                     maxlength="50" 
                     focus 
                     confirm-type="send"
+                    :adjust-position="false"
                     @keyboardheightchange="keyboardheightchange"
+                    @confirm="handleSendDanmu"
                 />
                 <text>{{danmuText.length}}/50</text>
             </view>
-            <view class="btn">发送</view>
+            <view class="btn" @click="handleSendDanmu">发送</view>
         </view>
           
     </view>
 </template>
 
 <script>
-
+import {apiVideoDanmuSend} from '@/api/video'
+import { debounce } from '@/utils/common.js';
 export default {
     props:{
         showDanmu:{
@@ -76,21 +106,68 @@ export default {
     watch: {
         curVideoId(){
             this.curSpeed='1.0'
+            if(this.videoInfo.id==this.curVideoId){//显示弹幕
+                this.closeDM=false
+            }else{
+                this.closeDM=true
+                this.curVideoIns=null
+                this.play=false
+                this.danmuList=[]
+                this.temdanmuList.forEach(item=>{
+                    item.done=false
+                })
+            }
+        },
+        showInput(n){
+            //写弹幕时暂停视频
+            if(n){
+                this.curVideoIns.pause()
+            }else{
+                this.curVideoIns.play()
+            }
+        },
+        closeDM(){
+            if(this.closeDM){
+                this.danmuList=[]//如果关闭了弹幕显示 则清空一次 弹幕列表 防止 切换回来又会重新播放一次已有的弹幕
+            }
+        }
+    },
+    computed:{
+        selfUserid(){ 
+            return this.$store.state.user.userInfo.user_id;
         }
     },
     data() {
         return {
             curVideoIns:null,
+            play:false,//视频播放状态
+            curVideoTime:0,
 
             showInput:false,//显示悬浮输入弹幕弹窗
-            closeDM:false,//是否关闭弹幕
+            closeDM:true,//是否关闭弹幕
             danmuText:'',
 
             showSpeedOpt:false,
             speedOpts:['0.5','0.8','1.0','1.25','1.5','2.0'],
             curSpeed:'1.0',
+
+            keyboardheight:0,//键盘高度
+            isFullScreen:false,//是否为全屏
+            isShowControls:false,//是否显示视频的控制栏
+
+            safeAreaTop:0,
+
+            temdanmuList:this.videoInfo.bullet_chat_list||[],
+            danmuList:[],
         }
     },
+    created(){
+        uni.getSystemInfo({
+            success:(res)=>{
+                this.safeAreaTop=res.safeArea.top
+            }
+        })
+    },
     methods: {
         //点击最外层盒子
         handleClickWrap(){
@@ -104,28 +181,50 @@ export default {
                 this.curVideoIns=uni.createVideoContext(this.curVideoId.toString(),this)//由于是在自定义组件内 所有this不可少
             }, 300);
         },
+        handleVideoPlay(){
+            this.play=true
+        },
         handleVideoEnd(){
             // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
             this.curVideoIns.exitFullScreen()
             this.curVideoIns=null
+            this.play=false
+            this.danmuList=[]
+            this.temdanmuList.forEach(item=>{
+                item.done=false
+            })
             this.$emit('ended')
         },
         handleVideoPause(){
+            this.play=false
             this.$emit('pause')
         },
         handleTimeUpdate(e){
+            this.addDanmu(e.detail.currentTime)
+            this.curVideoTime=e.detail.currentTime
             this.$emit('timeupdate',e)
         },
-        
+        handleFullscreenchange(e){
+            this.isFullScreen=e.detail.fullScreen
+        },
+        handleControlstoggle(e){
+            this.isShowControls=e.detail.show
+        },
         //键盘高度变为0 则收起悬浮弹幕输入框
         keyboardheightchange(e){
-            if(e.detail.height===0){
-                setTimeout(() => {
-                    this.showInput=false
-                }, 60);
-            }
+            this.keyboardheight=e.detail.height
+            this.handlekeyboardheight()
         },
+        handlekeyboardheight:debounce(function(){
+            if(this.keyboardheight==0&&this.showInput){
+                this.showInput=false
+            }
+        },60),
 
+        //切换为背景音频播放
+        handleChangeMusic(){
+            this.curVideoIns.requestBackgroundPlayback()
+        },
 
         // 倍速切换
         handleVideoSpeedChange(item){
@@ -133,6 +232,67 @@ export default {
             this.curVideoIns.playbackRate(num)
             this.curSpeed=item
             this.showSpeedOpt=false
+        },
+
+        //点击视频区域外面的 显示弹幕按钮 进行判断如果当前视频没有播放 则不改变状态
+        handleShowDM(){
+            if(this.videoInfo.id==this.curVideoId){
+                this.closeDM=false
+            }
+        },
+        
+        //发送弹幕
+        handleSendDanmu(){
+            if(!this.danmuText) return
+            apiVideoDanmuSend({
+                content:this.danmuText,
+                seconds:parseInt(this.curVideoTime),
+                primary_id:this.videoInfo.id,
+                source:this.videoInfo.source
+            }).then(res=>{
+                this.danmuText=''
+                if(res.code===200){
+                    this.temdanmuList.push({...res.data,seconds:Number(res.data.seconds)+3})
+                }
+            })
+        },
+
+        //添加弹幕到视频上去
+        addDanmu(ctime){
+            this.temdanmuList.forEach(item => {
+                if(item.seconds>ctime-1&&item.seconds<ctime+1){// 前后误差一秒
+                    if(!item.done){
+                        item.done=true
+                        this.danmuList.push({
+                            ...item,
+                            top:this.getTopPosition(),
+                            speed:Math.floor(Math.random()*(16-8+1))+8//4~8 之间的随机数
+                        })
+                    }
+                }else{
+                    // 如果播放过了 手贱又把进度条拖回去了 则重置done
+                    if(ctime-1<item.seconds){
+                        item.done=false
+                    }
+                    if(ctime+1>item.seconds){
+                        item.done=true
+                    }
+                }
+            });
+        },
+
+        //设置弹幕位置
+        getTopPosition(){
+            const length=this.danmuList.length
+            let num=0
+            if(length%3===1){
+                num=10
+            }else if(length%3===2){
+                num=30
+            }else{
+                num=50
+            }
+            return num+'px'
         }
 
     },
@@ -199,8 +359,8 @@ export default {
         left: 0;
         right: 0;
         bottom: 0;
-        z-index: 999999;
-        background-color: #fff;
+        z-index: 999999999;
+        background-color: #ffffff;
         padding: 10rpx 34rpx;
         border-top: 1px solid #E5E5E5;
         align-content: center;
@@ -235,6 +395,16 @@ export default {
         position: absolute;
         bottom: 30%;
         right: 5%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .change-music-icon{
+        width: 40rpx;
+        height: 40rpx;
+        background-image: url('@/static/headphones-icon.png');
+        background-size: cover;
+        margin-bottom: 10rpx;
     }
 
     .video-speed-btn{
@@ -267,5 +437,72 @@ export default {
             text-align: center;
         }
     }
+
+    .video-danmu-control-box{
+        margin-bottom: 10rpx;
+        view{
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .show-btn{
+            width: 80rpx;
+            height: 50rpx;
+            background-image: url('@/static/danmu-show-btn-2.png');
+            background-size: cover;
+        }
+        .close-btn{
+            width: 80rpx;
+            height: 50rpx;
+            background-image: url('@/static/danmu-close-btn-2.png');
+            background-size: cover;
+        }
+        .send-btn{
+            width: 100rpx;
+            height: 44rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 22rpx;
+            color: #fff;
+            font-size: 12px;
+            margin-top: 20rpx;
+        }
+    }
+
+    .danmu-scroll-box{
+        .danmu-item{
+            color: #fff;
+            animation: move 6s linear;
+            position: absolute;
+            top: 0;
+            display: block;
+            left: 150%;
+            position: absolute;
+            font-size: 12px;
+            height: 18px;
+        }
+        .animat-pause{
+            animation-play-state: paused;
+        }
+        .animat-run{
+            animation-play-state: running;
+        }
+        .border{
+            border: 1px solid #fff;
+            border-radius: 10px;
+            padding-top: 8px;
+            padding-left: 2px;
+            padding-right: 2px;
+        }
+        @keyframes move {
+            0%{
+                left: 150%;
+            }
+            100%{
+                left: -200%;
+            }
+        }
+    }
 }
 </style>

pages-roadShow/video/list.vue

@@ -52,20 +52,18 @@
                     <view class="time">发布时间：{{item.publish_time}}</view>
                     <view class="user-name">{{item.admin_real_name}}</view>
                 </view>
-                <video
-                    autoplay
-                    object-fit="contain"
-                    show-mute-btn
-                	show-background-playback-button
-                    :poster="item.cover_img_url"
-                    :src="item.video_url"
-                    enable-play-gesture
-                    :id="item.road_video_id"
-                    @ended="handleVideoEnd"
-                    v-if="item.road_video_id==curVideoId"
-                ></video>
-                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
-                <comment :videoInfo="getCommentData(item)"></comment>
+                <view class="video-content">
+                    <videoBox 
+                        :videoInfo="getDanmuData(item)"
+                        :curVideoId="curVideoId"
+                        :showDanmu="showDanmu"
+                        @videoPlay="handelClickPlay"
+                        @ended="handleVideoEnd"
+                        @pause="handleVideoPause"
+                        @timeupdate="handleTimeUpdate"
+                    />
+                </view>
+                <comment :showDanmu="showDanmu" :videoInfo="getCommentData(item)"></comment>
             </view>
         </view>
 
@@ -123,17 +121,19 @@
 </template>
 <script>
 import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
-import {apiGetSceneToParams,apiUserBindPermission} from '@/api/common'
+import {apiGetSceneToParams,apiUserBindPermission,apiViewLogUpdate} from '@/api/common'
 import noAuth from './components/noAuth.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
 import comment from '@/components/videoComment/comment.vue'
 import collectBox from '@/components/collectBox/collectBox.vue'
+import videoBox from '@/components/videoBox/videoBox.vue'
 export default {
     components:{
         noAuth,
         dragButton,
         comment,
-        collectBox
+        collectBox,
+        videoBox
     },
     data() {
         return {
@@ -149,12 +149,15 @@ export default {
             list:[],
 
             curVideoId:0,
-            curVideoIns:null,
+            curVideoTime:0,
+            videoRecordId:0,
 
             isAuth:true,
             noAuthData:null,
 
             noShareData:false,//用户从分享进入没有该分享的视频的权限
+
+            showDanmu:true,//控制整个模块是否显示弹幕功能（没用了本来后台有个开关功能的 后来不要了 但是还是留着吧）
         }
     },
     onLoad(options){
@@ -205,6 +208,22 @@ export default {
         this.getList()
     },
     methods: {
+        // 处理弹幕模块需要的数据
+        getDanmuData(item){
+            return {
+                source:2,
+                id:item.road_video_id,
+                ...item
+            }
+        },
+        // 处理评论模块需要的数据
+        getCommentData(item){
+            return {
+                source:3,
+                id:item.road_video_id,
+                ...item
+            }
+        },
         async init(options){
             if(options.scene){
                 const resScene=await apiGetSceneToParams({scene_key:options.scene})
@@ -289,25 +308,43 @@ export default {
 
         handelClickPlay(item){
             this.curVideoId=item.road_video_id
-            setTimeout(() => {
-                this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
-            }, 300);
             // 记录播放
             apiRoadShowVideoPlayLog({video_id:Number(item.road_video_id)}).then(res=>{
                 if(res.code===200){
                     console.log('视频埋点成功');
+                    this.videoRecordId=res.data
                 }
             })
         },
 
         //视频播放结束
         handleVideoEnd(){
-            // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
-            this.curVideoIns.exitFullScreen()
             setTimeout(() => {
                 this.curVideoId=0
-                this.curVideoIns=null
             }, 200);
+        },
+
+        //时长变化
+        handleTimeUpdate(e){
+            // console.log(this.curVideoId,e.detail.currentTime);
+            this.curVideoTime=e.detail.currentTime
+        },
+
+        handleVideoPause(){
+            // console.log(`视频 pause---${this.videoRecordId}----${this.curVideoTime}`);
+            this.handleUpdateVideoPlayTime()
+        },
+
+        // 更新播放时长
+        handleUpdateVideoPlayTime(){
+            if(!this.videoRecordId) return
+            apiViewLogUpdate({
+                id:this.videoRecordId,
+                stop_seconds:parseInt(this.curVideoTime),
+                source:4
+            }).then(res=>{
+                console.log('更新播放时长成功');
+            })
         }
     },
 }
@@ -397,30 +434,10 @@ export default {
                 color: #000;
                 vertical-align: middle;
             }
-            video{
+            .video-content{
                 width: 100%;
                 height: 400rpx;
                 margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-            }
-            .poster{
-                width: 100%;
-                height: 400rpx;
-                margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-                position: relative;
-                &::after{
-                    content:'';
-                    display: block;
-                    position: absolute;
-                    width: 120rpx;
-                    height: 120rpx;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    background-image: url('@/static/video-play-btn.png');
-                    background-size: cover;
-                }
             }
             .time{
                 font-size: 28rpx;

pages-roadShow/video/search.vue

@@ -39,22 +39,18 @@
                     <view class="time">发布时间：{{item.publish_time}}</view>
                     <view class="user-name">{{item.admin_real_name}}</view>
                 </view>
-                <video
-                    autoplay
-                    object-fit="contain"
-                    show-mute-btn
-                    show-background-playback-button
-                    :poster="item.cover_img_url"
-                    :src="item.video_url"
-                    enable-play-gesture
-                    :id="item.road_video_id"
-                    @ended="handleVideoEnd"
-                    @pause="handleVideoPause"
-                    @timeupdate="handleTimeUpdate"
-                    v-if="item.road_video_id==curVideoId"
-                ></video>
-                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
-                <comment :videoInfo="getCommentData(item)"></comment>
+                <view class="video-content">
+                    <videoBox 
+                        :videoInfo="getDanmuData(item)"
+                        :curVideoId="curVideoId"
+                        :showDanmu="showDanmu"
+                        @videoPlay="handelClickPlay"
+                        @ended="handleVideoEnd"
+                        @pause="handleVideoPause"
+                        @timeupdate="handleTimeUpdate"
+                    />
+                </view>
+                <comment :showDanmu="showDanmu" :videoInfo="getCommentData(item)"></comment>
             </view>
         </view>
     </view>
@@ -66,11 +62,13 @@ import {apiRoadShowVideoList,apiRoadShowVideoPlayLog} from '@/api/roadShow'
 import comment from '@/components/videoComment/comment.vue'
 import {apiViewLogUpdate} from '@/api/common'
 import collectBox from '@/components/collectBox/collectBox.vue'
+import videoBox from '@/components/videoBox/videoBox.vue'
 export default {
     components: {
         searchBox,
         collectBox,
-        comment
+        comment,
+        videoBox
     },
     data() {
         return {
@@ -82,9 +80,10 @@ export default {
             pageSize:10,
 
             curVideoId:0,
-            curVideoIns:null,
             curVideoTime:0,
             videoRecordId:0,
+
+            showDanmu:true,//控制整个模块是否显示弹幕功能（没用了本来后台有个开关功能的 后来不要了 但是还是留着吧）
         }
     },
     onReachBottom() {
@@ -109,6 +108,14 @@ export default {
         }
     },
     methods: {
+        // 处理弹幕模块需要的数据
+        getDanmuData(item){
+            return {
+                source:2,
+                id:item.road_video_id,
+                ...item
+            }
+        },
         // 处理评论模块需要的数据
         getCommentData(item){
             return {
@@ -150,9 +157,6 @@ export default {
 
         handelClickPlay(item){
             this.curVideoId=item.road_video_id
-            setTimeout(() => {
-                this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
-            }, 300);
             // 记录播放
             apiRoadShowVideoPlayLog({video_id:Number(item.road_video_id)}).then(res=>{
                 if(res.code===200){
@@ -164,11 +168,8 @@ export default {
 
         //视频播放结束
         handleVideoEnd(){
-            // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
-            this.curVideoIns.exitFullScreen()
             setTimeout(() => {
                 this.curVideoId=0
-                this.curVideoIns=null
             }, 200);
         },
 
@@ -269,30 +270,10 @@ page{
                 color: #000;
                 vertical-align: middle;
             }
-            video{
+            .video-content{
                 width: 100%;
                 height: 400rpx;
                 margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-            }
-            .poster{
-                width: 100%;
-                height: 400rpx;
-                margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-                position: relative;
-                &::after{
-                    content:'';
-                    display: block;
-                    position: absolute;
-                    width: 120rpx;
-                    height: 120rpx;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    background-image: url('@/static/video-play-btn.png');
-                    background-size: cover;
-                }
             }
             .time{
                 font-size: 28rpx;

pages/roadShow/video/list.vue

@@ -52,22 +52,18 @@
                     <view class="time">发布时间：{{item.publish_time}}</view>
                     <view class="user-name">{{item.admin_real_name}}</view>
                 </view>
-                <video
-                    autoplay
-                    object-fit="contain"
-                    show-mute-btn
-                    show-background-playback-button
-                    :poster="item.cover_img_url"
-                    :src="item.video_url"
-                    enable-play-gesture
-                    :id="item.road_video_id"
-                    @ended="handleVideoEnd"
-                    @pause="handleVideoPause"
-                    @timeupdate="handleTimeUpdate"
-                    v-if="item.road_video_id==curVideoId"
-                ></video>
-                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
-                <comment :videoInfo="getCommentData(item)"></comment>
+                <view class="video-content">
+                    <videoBox 
+                        :videoInfo="getDanmuData(item)"
+                        :curVideoId="curVideoId"
+                        :showDanmu="showDanmu"
+                        @videoPlay="handelClickPlay"
+                        @ended="handleVideoEnd"
+                        @pause="handleVideoPause"
+                        @timeupdate="handleTimeUpdate"
+                    />
+                </view>
+                <comment :showDanmu="showDanmu" :videoInfo="getCommentData(item)"></comment>
             </view>
         </view>
 
@@ -130,12 +126,14 @@ import noAuth from './components/noAuth.vue'
 import dragButton from '@/components/dragButton/dragButton.vue'
 import comment from '@/components/videoComment/comment.vue'
 import collectBox from '@/components/collectBox/collectBox.vue'
+import videoBox from '@/components/videoBox/videoBox.vue'
 export default {
     components:{
         noAuth,
         dragButton,
         comment,
-        collectBox
+        collectBox,
+        videoBox
     },
     data() {
         return {
@@ -151,7 +149,6 @@ export default {
             list:[],
 
             curVideoId:0,
-            curVideoIns:null,
             curVideoTime:0,
             videoRecordId:0,
 
@@ -159,6 +156,8 @@ export default {
             noAuthData:null,
 
             noShareData:false,//用户从分享进入没有该分享的视频的权限
+
+            showDanmu:true,//控制整个模块是否显示弹幕功能（没用了本来后台有个开关功能的 后来不要了 但是还是留着吧）
         }
     },
     onLoad(options){
@@ -209,6 +208,14 @@ export default {
         this.getList()
     },
     methods: {
+        // 处理弹幕模块需要的数据
+        getDanmuData(item){
+            return {
+                source:2,
+                id:item.road_video_id,
+                ...item
+            }
+        },
         // 处理评论模块需要的数据
         getCommentData(item){
             return {
@@ -301,9 +308,6 @@ export default {
 
         handelClickPlay(item){
             this.curVideoId=item.road_video_id
-            setTimeout(() => {
-                this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
-            }, 300);
             // 记录播放
             apiRoadShowVideoPlayLog({video_id:Number(item.road_video_id)}).then(res=>{
                 if(res.code===200){
@@ -315,11 +319,8 @@ export default {
 
         //视频播放结束
         handleVideoEnd(){
-            // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
-            this.curVideoIns.exitFullScreen()
             setTimeout(() => {
                 this.curVideoId=0
-                this.curVideoIns=null
             }, 200);
         },
 
@@ -433,30 +434,10 @@ export default {
                 color: #000;
                 vertical-align: middle;
             }
-            video{
+            .video-content{
                 width: 100%;
                 height: 400rpx;
                 margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-            }
-            .poster{
-                width: 100%;
-                height: 400rpx;
-                margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-                position: relative;
-                &::after{
-                    content:'';
-                    display: block;
-                    position: absolute;
-                    width: 120rpx;
-                    height: 120rpx;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    background-image: url('@/static/video-play-btn.png');
-                    background-size: cover;
-                }
             }
             .time{
                 font-size: 28rpx;

pages/video/videoList.vue

@@ -47,7 +47,7 @@
                 <view class="time">发布时间：{{item.publish_time}}</view>
                 <view class="video-content">
                     <videoBox 
-                        :videoInfo="getCommentData(item)"
+                        :videoInfo="getDanmuData(item)"
                         :curVideoId="curVideoId"
                         :showDanmu="showDanmu"
                         @videoPlay="handelClickPlay"
@@ -198,6 +198,14 @@ export default {
         this.getList()
     },
     methods: {
+        // 处理弹幕模块需要的数据
+        getDanmuData(item){
+            return {
+                source:1,
+                id:item.community_video_id,
+                ...item
+            }
+        },
         // 处理评论模块需要的数据
         getCommentData(item){
             return {

pages/video/videoSearch.vue

@@ -36,22 +36,18 @@
                     <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
                 </button>
                 <view class="time">发布时间：{{item.publish_time}}</view>
-                <video
-                    autoplay
-                    object-fit="contain"
-                    show-mute-btn
-                    show-background-playback-button
-                    :poster="item.cover_img_url"
-                    :src="item.video_url"
-                    enable-play-gesture
-                    :id="item.community_video_id"
-                    @ended="handleVideoEnd"
-                    @pause="handleVideoPause"
-                    @timeupdate="handleTimeUpdate"
-                    v-if="item.community_video_id==curVideoId"
-                ></video>
-                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
-                <comment :videoInfo="getCommentData(item)"></comment>
+                <view class="video-content">
+                    <videoBox 
+                        :videoInfo="getDanmuData(item)"
+                        :curVideoId="curVideoId"
+                        :showDanmu="showDanmu"
+                        @videoPlay="handelClickPlay"
+                        @ended="handleVideoEnd"
+                        @pause="handleVideoPause"
+                        @timeupdate="handleTimeUpdate"
+                    />
+                </view>
+                <comment :showDanmu="showDanmu" :videoInfo="getCommentData(item)"></comment>
             </view>
         </view>
     </view>
@@ -63,11 +59,13 @@ import {apiVideoList,apiVideoPlayLog} from '@/api/video'
 import {apiViewLogUpdate} from '@/api/common'
 import comment from '@/components/videoComment/comment.vue'
 import collectBox from '@/components/collectBox/collectBox.vue'
+import videoBox from '@/components/videoBox/videoBox.vue'
 export default {
     components: {
         searchBox,
         comment,
-        collectBox
+        collectBox,
+        videoBox
     },
     data() {
         return {
@@ -79,9 +77,10 @@ export default {
             pageSize:10,
 
             curVideoId:0,
-            curVideoIns:null,
             curVideoTime:0,
             videoRecordId:0,
+
+            showDanmu:true,//控制整个模块是否显示弹幕功能（没用了本来后台有个开关功能的 后来不要了 但是还是留着吧）
         }
     },
     onReachBottom() {
@@ -106,6 +105,14 @@ export default {
         }
     },
     methods: {
+         // 处理弹幕模块需要的数据
+        getDanmuData(item){
+            return {
+                source:1,
+                id:item.community_video_id,
+                ...item
+            }
+        },
         // 处理评论模块需要的数据
         getCommentData(item){
             return {
@@ -147,9 +154,6 @@ export default {
 
         handelClickPlay(item){
             this.curVideoId=item.community_video_id
-            setTimeout(() => {
-                this.curVideoIns=uni.createVideoContext(this.curVideoId.toString())
-            }, 300);
             // 记录播放
             apiVideoPlayLog({video_id:Number(item.community_video_id)}).then(res=>{
                 if(res.code===200){
@@ -161,11 +165,8 @@ export default {
 
         //视频播放结束
         handleVideoEnd(){
-            // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常，安卓横屏不恢复竖屏，ios底部tabbar渲染异常
-            this.curVideoIns.exitFullScreen()
             setTimeout(() => {
                 this.curVideoId=0
-                this.curVideoIns=null
             }, 200);
         },
 
@@ -258,30 +259,10 @@ page{
                 font-size: 32rpx;
                 color: #000;
             }
-            video{
+            .video-content{
                 width: 100%;
                 height: 400rpx;
                 margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-            }
-            .poster{
-                width: 100%;
-                height: 400rpx;
-                margin: 30rpx 0 20rpx 0;
-                border-radius: 20rpx;
-                position: relative;
-                &::after{
-                    content:'';
-                    display: block;
-                    position: absolute;
-                    width: 120rpx;
-                    height: 120rpx;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%,-50%);
-                    background-image: url('@/static/video-play-btn.png');
-                    background-size: cover;
-                }
             }
             .time{
                 font-size: 28rpx;