可直接在新的页面复制使用。测试可用
<template>
<div class="video-js" style="width: 600px;">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
>
</video-player>
</div>
</template>
<script>
// import videojs from 'video.js'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
// SWF_URL="https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf"
videojs.options.flash.swf = "https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf" // 设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件
export default {
name: 'videojs',
components: {
videoPlayer
},
data() {
return {
videoUrl:'rtmp://10.10.7.205:1936/live/rtsp_cam1',
playerOptions: {
live: true,
autoplay: true, // 如果true,浏览器准备好时开始播放
muted: false, // 默认情况下将会消除任何音频
loop: false, // 是否视频一结束就重新开始
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
aspectRatio: '7:4', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
language: 'zh-CN',
// poster:'https://file.digitaling.com/eImg/uimages/20150907/1441607120885946.gif',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
currentTimeDisplay: true, // 当前时间
volumeControl: true, // 声音控制键
playToggle: true, // 暂停和播放键
progressControl: true, // 进度条
fullscreenToggle: true // 全屏按钮
},
techOrder: ['flash', 'html5'],//设置顺序,
flash: {
hls: {withCredentials: false },
swf: "https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf" },
html5: { hls: { withCredentials: false } },
sources: [{
type: 'rtmp/flv',
src: 'rtmp://10.10.7.205:1936/live/rtsp_cam1' // 视频地址-改变它的值播放的视频会改变
}],
notSupportedMessage: '此视频暂无法播放,请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
}
}
},
methods: {
// 加载数据
onPlayerLoadeddata(player) {
// 直播每次播放都会调用--录播只是刚开始调用一次
console.log("loadeddata");
},
onPlayerCanplaythrough(player) {
// 在不停下来进行缓冲的情况下--每次拖拽的时候都会缓冲
console.log("canplaythrough");
},
onPlayerPlay(player) {
console.log("播放");
console.log(player)
},
onPlayerPause(player) {
console.log("暂停");
},
},
watch: {
/*test: function(val, oldVal){},*/
},
/* 页面初始化执行方法:此方法可写同步方法,有先后加载顺序的逻辑建议用同步方法 */
mounted: function() {
this.playerOptions.sources[0].src = this.videoUrl;
this.playerOptions.autoplay = true; //再次告诉是自动播放
}
}
</script>
<style lang="scss" scoped>
</style>