某天接到了一个任务,播放一个视频流。后端大哥发给我一个rtmp流,然后,踩坑之旅就开始了。
“这很简单嘛,百度上都是使用vue-video-play插件,设置一下source就行了”。这个先入为主的观点,害得我花了整完去解决各种各样的问题。approach哭辽
解决:
然后发现是视频流格式不对,叫后端大哥返回APPhls就可了。
rtmp格式,需要浏览器有flash插件。而大部分浏览器chrome官方下载已经不支持安装插件,包括我想从chrome里设置后端开发是干什么的再使用依旧没成功。
对比一下其他后端开发几种视频流格式:
rtsp: 需要浏览器安装插件
flv后端开发工程师:不支持ios系统。不支持ie浏览器。首屏快,延时低、支持传输加密、支持浏览器无控件化播放。
hls:缺点是有延时,初次加载很慢。优点是系统兼容性较好、支持传输加密、支持浏览器无控件化appointment播放。
代码:
可做测试的hls流:
devstreaming.cdn.applios下载e.com/vide测试抑郁症的20道题os/stre…
1后端开发工程师 导入组件
npminstallvue-video-player--save
2 引用组件
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer)
3 应用组件
记得type不要填
import { videoPlayer } from 'vue-video-player'
<videoPlayer
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</videoPlayer>
<script>
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: true, // 如果true,浏览器准备好时开始回放。
controls: true, // 控制条
preload: 'auto', // 视频预加载
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: '',
src: "http://39.156.9.146:83/openUrl/O1uVeGA/live.m3u8",
},
],
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
},
}
},
}
<script>
4 格式调整
修改播放按钮格式
::v-deep .vjs-custom-skin > .video-js .vjs-big-play-button {
background-color: rgba(0, 0, 0, 0.45);
font-size: 3.5em;
border-radius: 50%;
height: 2em !important;
line-height: 2em !important;
width: 2em !important;
margin-left: 150px !important;
margin-top: 90px !important;
outline: none;
}
5 实现打开界面就自动播放
<videoPlayer
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)">
</videoPlayer>
created() {
this.onPlayerPlay(this.$refs.videoPlayer.player)
},
computed: {
player() {
return this.$refs.videoPlayer.play
}
},
methods: {
onPlayerPlay() {
const myPlayer = this.$refs.videoPlayer.player
myPlayer.play()
},
}
6 实现多个视频播放
data() {
return {
playerOptions: [],
}
},
给options赋值
for (let i = 0; i < this.hlsList.length; i++) {
let option = {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: true, // 如果true,浏览器准备好时开始回放。
controls: true, // 控制条
preload: 'auto', // 视频预加载
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: '',
src: this.hlsList[i],
},
],
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
}
this.playerOptions.push(option)
}
展示
<el-row class="videoList">
<el-col class="video1">
<videoPlayer
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions[0]"
@play="onPlayerPlay($event)"
></videoPlayer></el-col>
<el-col class="video2">
<videoPlayer
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions[1]"
@play="onPlayerPlay($event)"
></videoPlayer></el-col>
</el-row>