注意事项
（1）视频引入src现在好像不支持https://这种在线地址了，只能使用本地路径。
如果使用了https://会报下面这个错：查了下资料，很多人都出现这个情况，官方也没解答。
（2）src不支持.mkv等格式,只支持.mp4格式。
（3）谷歌浏览器的bug，不知道哪一年开始，到现在。一旦你使用了video这种标签，video自身的属性在谷歌浏览器中好像被屏蔽掉一样，最明显的是autoplay属性的自动播放功能，在谷歌中已经没有作用了。（所以我们使用uniapp的视频组件的时候，最好换个浏览器，不然会出现一些奇奇怪怪的现象）
（4）谷歌浏览器有时还会黑屏，有声音，没画像，这时候换个浏览器就好了。
IE浏览器
谷歌浏览器
这些都是我暂时遇到的bug。
弹幕使用
video视频播放组件常用的几个属性：
autoplay：自动播放
loop：循环播放
muted：静音播放,一般不用，不过在开发环境就会用到了，自己体会哈哈。
controls：使用默认配置好的播放控件（播放/暂停按钮、播放进度、播放时长、进度的滑动手势、屏幕放大等功能）
enable-danmu：开启弹幕功能
danmu-btn：弹幕切换开关（开启弹幕/屏蔽弹幕）
danmu-list：在视频中播放显示固定的弹幕列表内容
具体请看：https://uniapp.dcloud.io/component/video?id=video
固定弹幕滚动播放：
代码：
<template>
<view>
<video
src="../../static/video2.mp4"
autoplay="true"
loop="true"
enable-danmu="true"
danmu-btn="true"
:danmu-list="danmuList"
>
</video>
</view>
</template>
<script>
export default {
data() {
return {
danmuList: [
{
text:'这个电视剧也太好看了吧！爱了爱了！', //弹幕文本内容
color: '#a52664', //弹幕文字颜色
time: 2 // 这条弹幕在视频播放2秒后播放
},
{
text:'太虐心了，准备好纸巾！呜呜！',//文本
color: '#e8853b',
time: 4
},
{
text:'剧情真不错，太催人泪下了！',//文本
color: '#b31f45',
time: 6
}
]
}
},
}
</script>
用户实时发送弹幕：
用户界面搭建：
1.弹幕文本输入框：让用户能发送弹幕内容。
2.弹幕发送按钮。
3.通过uni.createVideoContext()接口创建一个操控视频上下文的操作对象,一般在页面加载时创建，也就是onLoad()生命周期内使用。
4.给文本输入框绑定@blur事件（用户光标离开了，证明输入框内容已经输入完了，准备点击发送弹幕的按钮）。
5.将input框获取到的用户输入弹幕内容显示到视频中。
6.用户点击了“发送弹幕”这个按钮时，做什么事情呢？绑定事件，发送弹幕 sendDanmu()（这时候我们就用到了视频上下文的操作对象了，在onLoad的时候就已经创建完成了）
视频上下文操作对象详情API：https://uniapp.dcloud.io/api/media/video-context
效果预览：
完整代码：
<template>
<view>
<video
id="myVideo"
:src="videoSrc"
autoplay="true"
loop="true"
enable-danmu="true"
danmu-btn="true"
:danmu-list="danmuList"
muted="true"
>
</video>
<view class="inputBox">
<input
type="text"
value=""
placeholder="输入弹幕内容"
@blur="input"
/>
</view>
<button type="default" @tap="bindSendDanmu">发送弹幕</button>
</view>
</template>
<script>
export default {
data() {
return {
videoSrc:'../../static/video2.mp4',
danmuList: [
{
text:'这个电视剧也太好看了吧！爱了爱了！', //弹幕文本内容
color: '#a52664', //弹幕文字颜色
time: 2 // 这条弹幕在视频播放2秒后播放
},
{
text:'太虐心了，准备好纸巾！呜呜！',//文本
color: '#e8853b',
time: 4
},
{
text:'剧情真不错，太催人泪下了！',//文本
color: '#b31f45',
time: 6
}
],
inputValue: ''
}
},
onLoad() {//监听页面加载
this.videoContext = uni.createVideoContext('myVideo')
//创建一个视频上下文的操作对象，通过id标识获取myVideo
},
methods:{
input:function(e){ //获取用户输入的弹幕内容
console.log(e)
this.inputValue = e.detail.value //将拿到的用户弹幕内容显示到屏幕上
},
bindSendDanmu:function(){//实现发送弹幕的功能
this.videoContext.sendDanmu({
text: this.inputValue ,//将拿到的用户弹幕内容发送到屏幕上
color:"red" //弹幕文本颜色
})
}
}
}
</script>
<style lang="scss">
video {
width: 750upx;
}
.inputBox {
width: 750upx;
height: 90upx;
margin-bottom: 10upx;
input {
width: 100%;
height: 90upx;
border: 1upx solid #808080;
border-radius: 20upx;
}
}
</style>
拓展
发送随机弹幕颜色
封装一个getRandomColor随机生成弹幕颜色的函数。
getRandomColor: function () {//实现随机弹幕颜色功能
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16) //生成16进制颜色
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
用户点击“发送弹幕”按钮时触发这个函数。
bindSendDanmu:function(){//实现发送弹幕的功能
this.videoContext.sendDanmu({
text: this.inputValue ,//将拿到的用户弹幕内容发送到屏幕上
color: this.getRandomColor() //调用封装好的函数：随机弹幕文本颜色
})
},
效果预览：
网友评论