安装
import hls from 'videojs-contrib-hls' import videoplayer from 'vue-video-player'; import "video.js/dist/video-js.css" import "vue-video-player/src/custom-theme.css" vue.use(hls) vue.use(videoplayer)
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto"> <source src="http://ivi.bupt.edu.cn/hls/cctv1.m3u8" type="application/x-mpegurl" /> </video>
import "video.js/dist/video-js.css"; import videojs from "video.js"; import "videojs-contrib-hls";
mounted(){ videojs( "my-video", { bigplaybutton: false, texttrackdisplay: false, posterimage: true, errordisplay: false, controlbar: true }, function() { this.play(); } ); }
页面中使用 第二种方式
<video-player class="video-player vjs-custom-skin" :playsinline="true" :options="'http://ivi.bupt.edu.cn/hls/cctv1.m3u8'|videooption"> </video-player>
import 'videojs-contrib-hls'
filters:{ videooption(val) { console.log('val',val) return { live: false, preload: "auto", autoplay: true, language: "zh-cn", aspectratio: "16:8", fluid: true, sources: [ { src: val //url地址 } ], notsupportedmessage: "此视频暂无法播放,请稍后再试", //允许覆盖video.js无法播放媒体源时显示的默认信息。 controlbar: { timedivider: false, durationdisplay: false, remainingtimedisplay: false, fullscreentoggle: true //全屏按钮 }, flash: { hls: { withcredentials: false } } } }, }
如对本文有疑问, 点击进行留言回复!!
vue脚手架安装以及vue脚手架创建项目(详细步骤),看这篇文章就行了,小白也能创建自己的项目
JavaScript递归函数详解:如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论