video
<template>
<div>
<Video :usCannotFF="true" />
</div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import Video from "@/components/common/video.vue";
@Component({
components: {
Video,
},
})
export default class myExam extends Vue {
created() {}
}
</script>
<style scoped lang="less">
</style>
<template>
<!--
属性:
autoplay 自动播放
muted 静音
poster src 封面
controlslist nodownload 取消下载按钮
disablePictureInPicture 取消画中画
nofullscreen 取消全屏
@:
loadedmetadata 视频的总长度
play 开始播放
playing 播放中
waiting 加载中
pause 暂停播放
ended 播放结束
ratechange 切换播放速度
-->
<div>
剩余时长:{{ residueTime }}
<video
id="video"
ref="video"
controls
controlslist="nodownload"
webkit-playsinline
playsinline
x5-video-player-type="h5"
x5-video-orientation="h5"
x5-video-player-fullscreen
@loadedmetadata="loadedmetadata"
@play="play"
@playing="playing"
@waiting="waiting"
@pause="pause"
@ended="ended"
@ratechange="ratechange"
@timeupdate="timeupdate"
disablePictureInPicture
>
<!-- <source
type=""
src="//video-qn.51miz.com/preview/video/00/00/14/07/V-140724-0ABDCA75.mp4"
/> -->
<source
type=""
src="//video-qn.51miz.com/preview/video/00/00/14/06/V-140626-A9FE9685.mp4"
/>
您的浏览器暂不支持播放该视频,请升级至最新版浏览器。
</video>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({
components: {},
})
export default class examMe extends Vue {
@Prop({ default: 0 }) getLast: any; //获取当前播放位置
@Prop({ default: false }) usCannotFF: any; //是否允许快进
last: any = 0; //当前播放位置
cannotFF: any = false; //允许快进
duration: any = 0; //视频总长
residueTime: any = 0; //剩余时长
created() {
this.last = this.getLast;
this.cannotFF = this.usCannotFF;
}
mounted() {
this.$nextTick(() => {
let elevideo: any = this.$refs.video;
// elevideo.addEventListener("ratechange", function (val: any) {
// //加载数据 //视频的总长度
// console.log('用户切换播放速度为:' + elevideo.playbackRate);
// });
// console.log(elevideo);
// var elevideo: any = document.getElementById("video");
// console.log(elevideo)
// elevideo.addEventListener("loadedmetadata", function () {
// //加载数据 //视频的总长度
// console.log(elevideo.duration+'秒');
// });
// elevideo.addEventListener("play", function () {
// //播放开始执行的函数
// console.log("开始播放");
// });
// elevideo.addEventListener("playing", function () {
// //播放中
// console.log("播放中");
// });
// elevideo.addEventListener("waiting", function () {
// //加载
// console.log("加载中");
// });
// elevideo.addEventListener("pause", function () {
// //暂停开始执行的函数
// console.log("暂停播放");
// });
// elevideo.addEventListener(
// "ended",
// function () {
// //结束
// console.log("播放结束");
// },
// false
// );
});
}
loadedmetadata(val: any) {
console.log(val);
this.$nextTick(() => {
let elevideo: any = this.$refs.video;
console.log(elevideo.duration + "秒");
this.duration = elevideo.duration;
});
}
play() {
console.log("开始播放");
}
playing() {
console.log("播放中");
}
waiting() {
console.log("加载中");
}
pause() {
console.log("暂停播放");
}
ended() {
console.log("播放结束");
}
ratechange() {
let elevideo: any = this.$refs.video;
console.log("当前播放速度为:" + elevideo.playbackRate);
//是否固定播放速度为1
if (elevideo.playbackRate !== 1) {
console.log("无法修改");
elevideo.playbackRate = 1;
}
}
timeupdate() {
this.$nextTick(() => {
let elevideo: any = this.$refs.video;
elevideo.addEventListener("play", function () {
//播放开始执行的函数
console.log("开始播放");
});
if (elevideo) {
console.log(elevideo.currentTime);
let current: any = elevideo.currentTime;
//当拖动滚动条时大于两秒时,返回原点(是否允许拖动滚动条)
if (this.cannotFF) {
if (
current > 2 &&
(current - this.last > 2 || this.last - current > 2)
) {
console.log("当前视频无法快进");
elevideo.currentTime = this.last;
} else {
this.last = current;
this.diffTime(current);
}
} else {
this.diffTime(current);
}
}
});
}
diffTime(current: any) {
let diff: any = Math.floor(this.duration - current);
this.residueTime =
(diff / 60 > 1 ? Math.floor(diff / 60) : 0) +
":" +
(diff % 60 > 9 ? diff % 60 : "0" + (diff % 60));
}
}
</script>
<style scoped lang="less">
#video {
width: 100%;
height: 200px;
object-fit: fill;//铺满
}
//全屏按钮
// #video::-webkit-media-controls-fullscreen-button {
// display: none;
// }
//播放按钮
// #video::-webkit-media-controls-play-button {
// display: block!important;
// }
//进度条
// #video::-webkit-media-controls-timeline {
// display: none;
// }
// //观看的当前时间
// #video::-webkit-media-controls-current-time-display {
// display: none;
// }
// //剩余时间
// #video::-webkit-media-controls-time-remaining-display {
// display: none;
// }
// //音量按钮
// #video::-webkit-media-controls-mute-button {
// display: none;
// }
// #video::-webkit-media-controls-toggle-closed-captions-button {
// display: none;
// }
// //音量的控制条
// #video::-webkit-media-controls-volume-slider {
// display: none;
// }
//所有控件
// #video::-webkit-media-controls-enclosure {
// display: none;
// }
</style>
videoJS
引入:npm install --save-dev video.js
import ‘video.js/dist/video-js.css’;
ts报错在shims-vue.d.ts中:declare module '.js’*
全屏控制:npm install --save videojs-landscape-fullscreen
<template>
<div>
<Video-player :options="videoOptions" />
</div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import VideoPlayer from "@/components/common/VideoPlayer.vue";
@Component({
components: {
VideoPlayer,
},
})
export default class myExam extends Vue {
videoOptions: any = {
width: '100%',
height: '200',
autoplay: false, //自动播放
poster: "",//封面地址
// preload: true,//预加载 auto自动 metadata元数据信息 ,比如视频长度,尺寸等 none 不预加载任何数据,直到用户开始播放才开始下载
notSupportedMessage: '此视频暂无法播放,请稍后再试',//无法播放时显示的信息
// techOrder: ['html5', 'flash'],// 兼容顺序
// sourceOrder: true,
controls: true, //用户可以与之交互的控件
loop: false, //视频一结束就重新开始
muted: false, //默认情况下将使所有音频静音
playbackRates: [0.5, 1, 1.5, 2],//倍速
aspectRatio: "16:9", //显示比率
fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
fullscreen: {
options: { navigationUI: "hide" },
},
sources: [
{
src: "//video-qn.51miz.com/preview/video/00/00/14/06/V-140626-A9FE96856.mp4",
type: "video/mp4",
},
],
};
created() {}
}
</script>
<style scoped lang="less">
</style>
<template>
<div>
<video
ref="videoRef"
class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered"
id="video"
></video>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import videojs from "video.js";
import "videojs-landscape-fullscreen";
@Component({
components: {},
})
export default class VideoPlayer extends Vue {
@Prop({
default: () => {
return {
width: "100%",
height: "200",
autoplay: false, //自动播放
poster: "", //封面地址
// preload: true,//预加载 auto自动 metadata元数据信息 ,比如视频长度,尺寸等 none 不预加载任何数据,直到用户开始播放才开始下载
notSupportedMessage: "此视频暂无法播放,请稍后再试", //无法播放时显示的信息
// techOrder: ['html5', 'flash'],// 兼容顺序
// sourceOrder: true,
controls: true, //用户可以与之交互的控件
loop: false, //视频一结束就重新开始
muted: false, //默认情况下将使所有音频静音
playbackRates: [0.5, 1, 1.5, 2], //倍速
aspectRatio: "16:9", //显示比率
fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
fullscreen: {
options: { navigationUI: "hide" },
},
sources: [],
};
},
})
options: any;
player: any = null;
created() {}
mounted() {
let that: any = this;
this.player = videojs(
that.$refs.videoRef,
that.options,
function onPlayerReady(this: any) {
let player: any = this;
// this.landscapeFullscreen()
console.log("onPlayerReady", player);
console.log("播放器OK");
player.on("loadedmetadata", function (val: any) {
console.log("视频总长度:" + player.duration() + "秒");
});
player.on("play", function () {
console.log("开始/恢复播放");
});
player.on("waiting", function () {
console.log("加载中");
});
player.on("playing", function () {
console.log("播放中");
});
player.on("timeupdate", function () {
console.log(player.currentTime());
});
player.on("pause", function () {
console.log("暂停播放");
});
player.on("ended", function () {
console.log("结束播放");
});
player.on("ratechange", function () {
console.log("切换播放速度" + player.playbackRate());
});
}
);
//初始化
this.initVideo();
}
initVideo() {
this.$nextTick(() => {
this.player.landscapeFullscreen({
fullscreen: {
enterOnRotate: true, // 横向旋转设备时进入全屏模式
exitOnRotate: true, // 纵向旋转设备时退出全屏模式
alwaysInLandscapeMode: true, // 即使设备处于横向状态,也始终进入全屏模式在纵向模式下(适用于 chromium、firefox 和 ie >= 11)
iOS: true, //是否在 iOS 上使用假全屏(需要显示播放器控件而不是系统控件)
},
});
});
}
beforeRouteLeave(to: any, from: any, next: any) {
if (this.player) {
this.player.dispose();
}
next();
}
}
</script>
<style scoped lang="less">
.vjs-matrix {
width: 100%;
height: 230px;
background-color: #fff;
video {
object-fit: fill;
width: 100%;
height: 200;
}
}
/deep/ .vjs-has-started {
.vjs-control-bar {
height: 5em;
}
.vjs-icon-placeholder::before {
font-size: 2.4em !important;
}
.vjs-remaining-time,
.vjs-playback-rate-value,
.vjs-icon-placeholder::before {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
}
</style>
<!-- videojs.addLanguage('zh-CN', {
"Picture-in-Picture" : "画中画",
"Exit Picture-in-Picture" : "退出画中画",
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",
"Loaded": "加载完毕",
"Progress": "进度",
"Fullscreen": "全屏",
"Non-Fullscreen": "退出全屏",
"Mute": "静音",
"Unmute": "取消静音",
"Playback Rate": "播放速度",
"Subtitles": "字幕",
"subtitles off": "关闭字幕",
"Captions": "内嵌字幕",
"captions off": "关闭内嵌字幕",
"Chapters": "节目段落",
"Close Modal Dialog": "关闭弹窗",
"Descriptions": "描述",
"descriptions off": "关闭描述",
"Audio Track": "音轨",
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
"The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。",
"Play Video": "播放视频",
"Close": "关闭",
"Modal Window": "弹窗",
"This is a modal window": "这是一个弹窗",
"This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
", opens captions settings dialog": ", 开启标题设置弹窗",
", opens subtitles settings dialog": ", 开启字幕设置弹窗",
", opens descriptions settings dialog": ", 开启描述设置弹窗",
", selected": ", 选择",
"captions settings": "字幕设定",
"Audio Player": "音频播放器",
"Video Player": "视频播放器",
"Replay": "重播",
"Progress Bar": "进度小节",
"Volume Level": "音量",
"subtitles settings": "字幕设定",
"descriptions settings": "描述设定",
"Text": "文字",
"White": "白",
"Black": "黑",
"Red": "红",
"Green": "绿",
"Blue": "蓝",
"Yellow": "黄",
"Magenta": "紫红",
"Cyan": "青",
"Background": "背景",
"Window": "视窗",
"Transparent": "透明",
"Semi-Transparent": "半透明",
"Opaque": "不透明",
"Font Size": "字体尺寸",
"Text Edge Style": "字体边缘样式",
"None": "无",
"Raised": "浮雕",
"Depressed": "压低",
"Uniform": "均匀",
"Dropshadow": "下阴影",
"Font Family": "字体库",
"Proportional Sans-Serif": "比例无细体",
"Monospace Sans-Serif": "单间隔无细体",
"Proportional Serif": "比例细体",
"Monospace Serif": "单间隔细体",
"Casual": "舒适",
"Script": "手写体",
"Small Caps": "小型大写字体",
"Reset": "重启",
"restore all settings to the default values": "恢复全部设定至预设值",
"Done": "完成",
"Caption Settings Dialog": "字幕设定视窗",
"Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
"End of dialog window.": "结束对话视窗" -->