vue中使用video-player和百度地图
转自个人博客http://www.zuidaima.com/blog/4510047499799552.htm
先说视频
1.安装视频插件
npm install vue-video-player --save
2.在main.js中引入
import VueVideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer)
3.使用,代码中有注释哦!!!
<template> <div > <div style="width: 1200px;float: left"> <video-player ref="player" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)" > </video-player> <!--<video-player class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"> </video-player>--> <!-- <div style="background-color: #2d8cf0;width: 10000px"></div>--> </div> <div style="padding: 10px;background: #f8f8f9;width: 390px;float: left;margin-left: 25px"> <Card title="Options" icon="ios-options" :padding="0" shadow style="height: 650px"> <CellGroup v-for="(item, index) in optionsVaules" :key="index"> <Cell >{{item}}</Cell> <!-- <Cell title="Only show titles" /> <Cell title="Only show titles" />--> <!-- <Cell title="Display label content" label="label content" /> <Cell title="Display right content" extra="details" /> <Cell title="Link" extra="details" to="/components/button" /> <Cell title="Open link in new window" to="/components/button" target="_blank" /> <Cell title="Disabled" disabled /> <Cell title="Selected" selected /> <Cell title="With Badge" to="/components/badge"> <Badge :count="10" slot="extra" /> </Cell> <Cell title="With Switch"> <Switch v-model="switchValue" slot="extra" /> </Cell>--> </CellGroup> </Card> </div> </div> </template> <script> import videojs from 'video.js' window.videojs = videojs // hls plugin for videojs6 require('videojs-contrib-hls/dist/videojs-contrib-hls.js') export default { name: 'level_2_1', data () { return { optionsVaules: [], modalVisible: false, playerOptions: { // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度 //liveui: false, autoplay: false, // 如果true,浏览器准备好时开始回放。 // muted: false, // 默认情况下将会消除任何音频。 loop: false, // 导致视频一结束就重新开始。 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 live: true, sources: [{ withCredentials: false, src: 'http://localhost:8080/video/2.mp4', // 路径 type: 'video/mp4' // 类型 }, { src: '//path/to/video.webm', type: 'video/webm' }], // poster: '../../static/images/test.jpg', // 你的封面地址 poster: 'http://localhost:8080/picture/1.png', // 你的封面地址 // width: document.documentElement.clientWidth, notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: false, durationDisplay: false, fullscreenToggle: false // 全屏按钮 }, controls: false } } /* playerOptions: { // videojs and plugin options height: '360', sources: [{ withCredentials: false, type: "application/x-mpegURL", src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8" }], controlBar: { timeDivider: false, durationDisplay: false }, flash: { hls: { withCredentials: false }}, html5: { hls: { withCredentials: false }}, poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg" } } */ }, computed: { player () { return this.$refs.videoPlayer.player } }, methods: { // listen event onPlayerPlay (player) { this.optionsVaules = []; //alert(player) setTimeout(res=>{ this.optionsVaules.push("到了34秒了") },34000) setTimeout(res=>{ this.optionsVaules.push("到了55秒了") },55000) // console.log('player play!', player) }, onPlayerPause (player) { // console.log('player pause!', player) }, onPlayerEnded (player) { // console.log('player ended!', player) }, onPlayerLoadeddata (player) { // console.log('player Loadeddata!', player) }, onPlayerWaiting (player) { // console.log('player Waiting!', player) }, onPlayerPlaying (player) { // console.log('player Playing!', player) }, onPlayerTimeupdate (player) { // console.log('player Timeupdate!', player.currentTime()) }, onPlayerCanplay (player) { // console.log('player Canplay!', player) }, onPlayerCanplaythrough (player) { // console.log('player Canplaythrough!', player) }, // or listen state event playerStateChanged (playerCurrentState) { // console.log('player current update state', playerCurrentState) }, // player is ready playerReadied (player) { // eslint-disable-next-line no-unused-vars var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls player.tech_.hls.xhr.beforeRequest = function (options) { // console.log(options) return options } } }, // eslint-disable-next-line no-dupe-keys mounted () { var video = document.getElementById('video') video.removeAttribute('controls') } } </script> <style> .video-js .vjs-progress-control.vjs-control { display: none; }.vjs-big-play-button{} </style>
期间出现了一个问题,就是我家主公不想要视频下方的进度条!这个我解决了半天,于是,我在Video.js看了它的文档!其中!!!
本以为把这个设置为true就ok了,结果不行!这是我就在群里问了一下,也就是那位老哥说吧controls设置为false,试了一下!还是不行,他说他从github上的案例就默认就没有!然后我仔细看了看,发现少些引入些东西
// videojs | |
import videojs from 'video.js' | |
window.videojs = videojs | |
// hls plugin for videojs6 | |
require('videojs-contrib-hls/dist/videojs-contrib-hls.js') |
加入之后就ojbk了!
<!-------------------------------------------华丽的分割线---------------------------------------------------->
第二部分!使用百度地图标点,画出轨迹!
1.在index.html下引入百度地图的js!
马赛克是啥啊!马赛克是你在百度地图开发平台上的东东!下图
3.使用!
<template> <div style="height:100%;"> <div id="myMap" class="myMapClass" ref="myMap"> </div> </div> </template>
<style scoped> .myMapClass { width: 100%; height: 800px; } </style>
标点呢网上已经也有现成的列子,这里我也不贴他的了,毕竟我也做了!绘图呢,我也做了!代码如下!
文中有注解!
<template> <div style="height:100%;"> <div id="myMap" class="myMapClass" ref="myMap"> </div> </div> </template> <script> export default { name: 'bdMap', components: {}, data () { return { markerArr: [ { title: "苏州有限公司", point: "113.264531|23.157003", address: "工业园区", tel: "10086", contact: "陈先生" }, { title: "南京有限公司", point: "113.330934|23.113401", address: "相城区", tel: "12306", contact: "陈先生" }, { title: "上海有限公司", point: "113.310854|23.113605", address: "外滩", tel: "0521846555", contact: "陈先生" } ] }; }, mounted () { this.initMap() }, methods: { initMap () { this.createMap(); //创建地图 this.setMapEvent();//设置地图事件 this.addMapControl();//向地图添加控件 this.addMarker();//向地图中添加marker }, createMap () { var map = new BMap.Map(this.$refs.myMap);//在百度地图容器中创建一个地图 var point = new BMap.Point(113.312213, 23.147267);//定义一个中心点坐标 map.centerAndZoom(point, 13);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 }, setMapEvent () { map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 }, addMapControl () { //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); }, addMarker () { var markerArr =this.markerArr; var point = new Array();//定义数组标注经纬信息 var marker = new Array();//定义数组点对象信息 var info = new Array();//定义悬浮提示信息 //debugger for (var i = 0; i < markerArr.length; i++) {//遍历 var infoA = markerArr[i].point.split("|")[0];//分割| var infoB = markerArr[i].point.split("|")[1]; point[i] = new window.BMap.Point(infoA, infoB); marker[i] = new window.BMap.Marker(point[i]); map.addOverlay(marker[i]); marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) }); marker[i].setLabel(label); info[i] = new window.BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + markerArr[i].title + "</br>地址:" + markerArr[i].address + "</br> 电话:" + markerArr[i].tel + "</br> 联系人:" + markerArr[i].contact + "</p>");//悬浮提示信息 } marker[0].addEventListener("mouseover", function () { this.openInfoWindow(info[0]);//悬浮监听提示方法 }); marker[1].addEventListener("mouseover", function () { this.openInfoWindow(info[1]);//悬浮监听提示方法 }); marker[2].addEventListener("mouseover", function () { this.openInfoWindow(info[2]);//悬浮监听提示方法, }); //轨迹 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,{ scale: 0.6,//图标缩放大小 strokeColor: 'red',//设置矢量图标的线填充颜色 strokeWidth: '3',//设置线宽 }); var icons = new BMap.IconSequence(sy,'10','30'); //轨迹设置 var polyline = new BMap.Polyline(point,{ enanleEditing: false, enanleClicking: true, icons: [icons], strokeWidth: '8', strokeOpacity: 0.8, strokeColor: "#18a45b" }); map.addOverlay(polyline); }, } } </script> <style scoped> .myMapClass { width: 100%; height: 800px; } </style>
多条轨迹如下
在今天下午的不懈努力和我领导亲切关怀下,我写出了终极版!
<template> <div style="height:100%;"> <div id="myMap" class="myMapClass" ref="myMap"> </div> <Row style="width: 150px;position: absolute;left: 350px;top: 135px;"> <Select v-model="vaule" filterable @on-change="onchange(vaule)"> <Option v-for="(item, index) in this.markerArr" :value="index" >{{ item.chepai }}</Option> </Select> </Row> </div> </template> <script> export default { name: 'bdMap', components: {}, data () { return { markerArr: [ { point: ["39.1012843854|117.1860914116","39.0990118876|117.1954160088","39.0901873621|117.2058553842","39.0834867789|117.2136097564"], chepai: "津A12884", chexing: "法拉利",yanse:"红色", jiashiyuan: "李先生", Idcard :"142303165541111211"}, { point: ["39.1107494560|117.1940658691","39.1121030411|117.2083491493","39.1143233784|117.2207309995","39.1166368041|117.2313138544"], chepai: "津B12264", chexing: "保时捷",yanse:"红色", jiashiyuan: "冯先生", Idcard :"142303165541111212"}, { point: ["39.1376493173|117.1481853019","39.1348236767|117.1661310346","39.1300931602|117.1691256109","39.1151555777|117.1804954479"], chepai: "津A12964", chexing: "宝马",yanse:"红色", jiashiyuan: "高先生", Idcard :"142303165521111213"}, { point: ["39.1341047856|117.2357422924","39.1288445770|117.2359940634","39.1273996003|117.2430131073","39.1241833161|117.2400281058"], chepai: "津J-AE86", chexing: "拖拉机",yanse:"红色", jiashiyuan: "郭先生", Idcard :"142303165541111214"} ], vaule :"", info :[], map :'' }; }, mounted () { this.initMap() }, methods: { initMap () { this.createMap(); //创建地图 this.setMapEvent();//设置地图事件 this.addMapControl();//向地图添加控件 // 绘制全部轨迹 for (var i in this.markerArr){ //debugger this.drawLine(this.markerArr[i]); } }, createMap () { var map = new BMap.Map(this.$refs.myMap);//在百度地图容器中创建一个地图 this.map = map var point = new BMap.Point(117.1860914116,39.1012843854);//定义一个中心点坐标 map.centerAndZoom(point, 13);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 }, setMapEvent () { map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 }, addMapControl () { //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); }, drawLine(line){ // debugger //轨迹 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,{ scale: 0.6,//图标缩放大小 strokeColor: 'red',//设置矢量图标的线填充颜色 strokeWidth: '3',//设置线宽 }); var icons = new BMap.IconSequence(sy,'10','30'); //悬浮信息 var info = new BMap.InfoWindow("<p style='font-size:12px;line-height:1.8em;'" + "</br>车牌:" + line.chepai + "</br> 车型:" + line.chexing + "</br> 颜色:" + line.yanse + "</br> 驾驶员:" + line.jiashiyuan + "</br> 身份证:" + line.Idcard + "</p>"); //把悬浮信息放入全局变量,目的是为了下拉框使用 this.info.push(info); var points = []; for (var i in line.point){ var longitude = line.point[i].split("|")[1]; var latitude = line.point[i].split("|")[0]; var newPoint = new BMap.Point(longitude, latitude); points.push(newPoint); //最后一个坐标点显示图片,和显示悬浮内容 if(parseInt(i) === line.point.length-1){ // debugger var marker = new BMap.Marker(newPoint); map.addOverlay(marker); marker.addEventListener("mouseover", function () { map.openInfoWindow(info,newPoint);//悬浮监听提示方法 }); } } //轨迹设置 var polyline = new BMap.Polyline(points,{ enanleEditing: false, enanleClicking: true, icons: [icons], strokeWidth: '8', strokeOpacity: 0.8, strokeColor: "#18a45b" }); map.addOverlay(polyline); }, // <!--下拉点击事件开始--> onchange(res) { for (var i in this.markerArr) { if(parseInt(i) === res){ var infoA = this.markerArr[i].point[i].split("|")[1];//分割| var infoB = this.markerArr[i].point[i].split("|")[0]; var p = new window.BMap.Point(infoA, infoB); map.openInfoWindow(this.info[i],p);//悬浮监听提示方法 } } } // <!--点击事件结束--> } } </script> <style scoped> .myMapClass { width: 100%; height: 100%; } </style>
加入我们群
如果有需要,欢迎可以加入我们的QQ群!(QQ搜索 816175200,加入我们的QQ群吧!)
有任何问题,也可以加入我们的QQ群,欢迎交(che)流(dan)!也欢迎参观我的博客www.aquestian.cn!