require(‘vue-video-player/src/custom-theme.css’)
//把VueVideoPlayer导入并挂在到vue上import VideoPlayer from 'vue-video-player'import 'videojs-flash' // 引入才能播放rtmp视频import 'videojs-contrib-hls' // 引入才能播放m3u8文件Vue.use(VideoPlayer) playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 autoplay: true, //如果true,浏览器准备好时开始回放。 controls: false, //控制条 preload: 'auto', //视频预加载 muted: true, //默认情况下将会消除任何音频。 loop: true, //导致视频一结束就重新开始。 language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 sources: [{ type: 'video/mp4', src: this.$global.baseUrl + 'uploadFile/20190903/测试aefc54ac-9341-4b61-b2c4-c66659b2ce55.mp4' }], poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址 width: document.documentElement.clientWidth, notSupportedMessage: '此视频暂无法播放,请稍后再试',//允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: false, durationDisplay: false, remainingTimeDisplay: false, fullscreenToggle: false //全屏按钮 } }, <!--</video>--> <video-player class="video-player vjs-custom-skin video-js" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ready="playerReadied" @ended="onPlayerEnded($event)" ></video-player> 06184793videoplayer是什么,videoplayer什么意思
来源:互联网 浏览:47次 时间:2023-04-08
1安装npm install vue-video-player --save2require('video.js/dist/video-js.css')