参考网址:
https://github.com/videojs/video.js
https://github.com/surmon-china/vue-video-player
https://www.freesion.com/article/4875170880/
https://www.npmjs.com/package/videojs-landscape-fullscreen
参考博客
videojs官网地址:
https://videojs.com/getting-started/
https://docs.videojs.com/
视频的横屏播放需要在手机上才能显示,电脑上模拟不行。
<template>
<div class="test-videojs">
<van-nav-bar @click-left="attentionback">
<template #title>
<span class="title">详细信息</span>
</template>
<template #left>
<van-icon name="arrow-left" color="#fff" />
</template>
</van-nav-bar>
<video
id="videoPlayer"
class="video-js vjs-default-skin"
muted
controls="controls"
controlslist="nodownload nofullscreen noremoteplayback"
x5-video-player-type="h5"
x5-video-orientation="landscape"
></video>
</div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
// import screenfull from "screenfull";
import "videojs-landscape-fullscreen";
export default {
data() {
return {
// https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
// 是一段视频,可将cctv1 (是live现场直播,不能快退)的替换为它,看到快进快退的效果
// http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
nowPlayVideoUrl:
"https://test-1308727152.cos.ap-shanghai.myqcloud.com/video/cb4514c0382eebabc0004b7f1b5b3207.mp4",
};
},
mounted() {
this.initVideo(this.nowPlayVideoUrl);
},
methods: {
initVideo(nowPlayVideoUrl) {
// 这些options属性也可直接设置在video标签上,见 muted
let options = {
autoplay: true, // 设置自动播放
controls: true, // 显示播放的控件
preload: "auto", // 预加载
controls: true, // 显示播放的控件
playbackRates: [0.5, 1, 1.25, 1.5, 2], // 倍速播放
sources: [
// 注意,如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
{
// src: nowPlayVideoUrl,
src: nowPlayVideoUrl,
// type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
type: "video/mp4", // 告诉videojs,这是一个hls流
},
],
notSupportedMessage: "此视频暂无法播放,请稍后再试",
};
// videojs的第一个参数表示的是,文档中video的id
const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
console.log(myPlyer === this); // 这里返回的是true
myPlyer.landscapeFullscreen({
fullscreen: {
enterOnRotate: true,
exitOnRotate: true,
alwaysInLandscapeMode: true,
iOS: true,
},
});
return myPlyer;
});
},
attentionback() {
this.$router.back();
},
},
};
</script>
<style lang="less" scoped>
.van-nav-bar {
background-color: #ff9966;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.title {
color: #fff;
font-size: 20px;
}
#videoPlayer {
width: 375px;
height: 300px;
margin-top: -20px;
// margin: 50px auto;
}
.vjs-big-play-button {
left: 50% !important;
top: 50% !important;
margin-top: -1px;
margin-left: -1.5;
}
</style>