一、vue-video-player实现视频播放
- 安装vue-video-player插件
vue-video-player
和videojs-contrib-hls
后者是播放播放m3u8格式视频流。 - 在main.js中引入注入到全局
const hls = require("videojs-contrib-hls") ;Vue.use(hls)
- 将css文件引入
import "video.js/dist/video-js.css";import "vue-video-player/src/custom-theme.css";
- 在使用的地方引入
import { videoPlayer } from "vue-video-player";
- 使用代码
<div class="video_1">
<videoPlayer :playsinline="true" :options="playerOptions"></videoPlayer>
</div>
//配置
this.playerOptions = {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //如果true,浏览器准备好时开始回放。
controls: true,
muted: true, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。
language: "zh-CN",
aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - // // 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // //是否流体自适应容器宽高
techOrder: ["html5"],
html5: { hls: { withCredentials: false } },
sources: [
{
type: "application/x-mpegURL", // 播放视频格式(除了rtmp格式)
src: "http://192.168.16.105:8081/flight/lxl.m3u8", // 视频的路径
},
],
poster: "", //封面地址
height: "100%",
notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: false,
durationDisplay: false,
remainingTimeDisplay: false,
fullscreenToggle: false, //全屏按钮
},
};
二、视频全屏信息框浮在视频之上
- 由于视频全屏后video标签层级是最高级,在pc端没有找到适合的方法使全屏的信息展示在视频之上。类似这种:
- 当时比较急,方案是:1、把视频全屏的按钮屏蔽掉,自己写一个全屏button。2、在一个盒子里吧全屏的视频和信息写好,隐藏掉(video不是全屏的时候可以像使用普通标签一样)。3、自己利用screenfull.js,在点击全屏button的时候让写好的盒子全屏。
- 这样可以达到全屏的效果,还可以把信息放到视频之上,但是这样页面上会有两个视频的存在,并不是真正意义上的让video全屏。暂时还没有找到更好的方法实现这个需求。
- 参考代码入下:
//这是需要全屏的video和信息
<div class="full-screen" v-show="dialogVisible" id="full" ref="full">
<div class="my-video" id="myVideo">
<videoPlayer :playsinline="true" :options="dialogPlayer"></videoPlayer>
</div>
<div :class="customClass">
<div class="dialog-header">
<span class="iconfont iconrightalign downward" v-show="!isShowInfo" @click="pickUp"></span>
<span class="iconfont iconleftalign upward" v-show="isShowInfo" @click="pickUp"></span>
<span class="retun-btn" @click="quitFull">
<img :src="returnBtn" />
</span>
</div>
<div class="dialog-info" v-show="isShowInfo">
<div class="info">
<p>
<span class="icon-cricle"></span>
<span>高度</span>
<span class="value">{{screenAltitude}}m</span>
</p>
<!-- <p>
<span class="icon-cricle"></span>
<span>速度</span>
<span class="value">37km/h</span>
</p>
<p>
<span class="icon-cricle"></span>
<span>机头朝向</span>
<span class="value">西南</span>
</p>-->
<p>
<span class="icon-cricle"></span>
<span>经度</span>
<span class="value">{{screenLongitude}}</span>
</p>
<p>
<span class="icon-cricle"></span>
<span>纬度</span>
<span class="value">{{screenLatitude}}</span>
</p>
</div>
<div class="dialog-map">
<div class="map" ref="mapSrceen"></div>
</div>
</div>
</div>
</div>
// 全屏
selfSrceen(code) {
this.dialogVisible = true;
this.customClass = "video-dialog_unfold";
this.dialogPlayer = {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //如果true,浏览器准备好时开始回放。
controls: true,
muted: true, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。
language: "zh-CN",
aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - // // 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // //是否流体自适应容器宽高
techOrder: ["html5"],
html5: { hls: { withCredentials: false } },
sources: [
{
type: "application/x-mpegURL", // 播放视频格式(除了rtmp格式)
src: "http://182.151.199.4:8082/flight/lxl.m3u8", // 视频的路径
},
],
poster: "", //封面地址
height: "100%",
code: "dc",
notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: false,
durationDisplay: false,
remainingTimeDisplay: false,
fullscreenToggle: false, //全屏按钮
},
};
screenfull.request(this.$refs.full);//主要是这个函数,可以直接让某个元素全屏
},
// 退出全屏
quitFull() {
this.dialogVisible = false;
screenfull.exit();//自己写的退出全屏事件
},
//---------esc退出全屏----------------------
//全屏判断状态 取消
checkFull() {
//判断浏览器是否处于全屏状态 (需要考虑兼容问题)
var isFull =
document.mozFullScreen ||
document.fullScreen ||
//谷歌浏览器及Webkit内核浏览器
document.webkitIsFullScreen ||
document.webkitRequestFullScreen ||
document.mozRequestFullScreen ||
document.msFullscreenEnabled;
if (isFull === undefined) {
isFull = false;
}
return isFull;
},
//在vue的create函数里监听全屏的变化。
created() {
let that = this;
// 监听全屏事件
window.onresize = function () {
if (!that.checkFull()) {
that.dialogVisible = false;
that.isShowInfo = true;
}
};
},
三、问题总结
这样的全屏可以实现,但是当用户按下F11播放大屏的时候是没有办法通过window.onresize
函数进行监听的,这个时候的浏览器窗口并没有发生变化,都是在大屏状态下,浏览器网页也没有办法监听esc事件,这样一来就会导致全屏后回去消息内容框还在,没有办法隐藏。