uniapp10-video视频播放器的使用

1、界面部分

接下来我们写一个按钮，然后跳到视频的界面，尝试一下对于视频的使用

主页先给安排一个按钮

 <view>
  <button @click="topage('/pages/component/video/video')">视频查看</button>
</view>

然后我们新建一个视频界面

这里是我新建立的界面的地址

完善一下按钮点击时候单独跳转部分

const topage=(row)=>{
		uni.navigateTo({
			url:row
		})
	}

2、在线链接

然后我们往其中写一下界面的demo部分

<template>
  <view class="container">
    <video
      src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
      id="myVideo"
      controls
    ></video>
  </view>
</template>

//官方给我们视频的演示地址
https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4



<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.video {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.controls {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

这里我们直接拿一下官方给我们的演示地址，可以看出没问题 ,而且这里我甚至都没有写任何的逻辑部分，也就是在线地址是完全可以的

3、本地静态地址

首先我们必须要知道的一点就是:

UNIAPP官方是不支持video静态路径的，思考一下就明白了，一个视频2M,小程序打包就2M,那还怎么放啊，对吧

接下来我们就用我们本地的静态路径地址试试，这里我已经把视频给放到了对应的静态路径下面

然后我们把地址给写上，这里可以看出来我们地址是完全一模一样的，接下来我们就看看界面效果

这里我们发现报错了一直就显示黑屏

这是因为uniapp找不到这个视频地址，换句话说，也就是我们说的上面官方不推荐静态地址

解决本地静态（本地服务器的方式）

这里我们确实无法使用本地的方法，但是好在我们可以写一个静态服务器

我就直接拿自己之前写的静态node服务器了，丢进去试试

访问本地静态视频资源，这里我本地的地址是这个

<video src="http://localhost:8888/video/2minute-demo.mp4"></video>

预览一下，ok，完全没问题，需要注意的就是，这里学习可以使用，但是上线是必须要使用线上视频的地址的。

4、官方推荐写法

上面的部分是我们自己纯粹在vue之中写的习惯然后写出来的，接下来我们尝试一下官方给我们的推荐的写法

这里我们就直接拿官方给我们的代码了

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>



<script>
export default {
    data() {
        return {
            src: '',
            danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
    methods: {
        sendDanmu: function() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
        videoErrorCallback: function(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor: function() {
            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('')
        }
    }
}
</script>

然后我们看看效果

还可以进行发弹幕，相当不错，接下来我们就可以在项目之中使用和扩展了！