vue中使用video-player和百度地图

刺骨的言语ヽ痛彻心扉 2023-06-22 13:54 86阅读 0赞

先说视频

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>
          
         
        </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>
             
            
            </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看了它的文档！其中！！！

![format_png][]本以为把这个设置为true就ok了，结果不行！这是我就在群里问了一下，也就是那位老哥说吧controls设置为false，试了一下！还是不行，他说他从[github][]上的案例就默认就没有！然后我仔细看了看，发现少些引入些东西

<table> 
 <tbody> 
  <tr> 
   <td>// videojs</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>import videojs from 'video.js'</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>window.videojs = videojs</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// hls plugin for videojs6</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>require('videojs-contrib-hls/dist/videojs-contrib-hls.js')</td> 
  </tr> 
 </tbody> 
</table>

加入之后就ojbk了！

第二部分！使用百度地图标点，画出轨迹！

1.在index.html下引入百度地图的js！

![format_png 1][]

马赛克是啥啊！马赛克是你在百度地图开发平台上的[东东][Link 1]！下图

![format_png 2][]

3.使用！

标点呢网上已经也有现成的列子，这里我也不贴他的了，毕竟我也做了！绘图呢，我也做了！代码如下！

文中有注解！

<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][]！

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDcvMjAxOTA3MjExNjE0MzY2OTRfdy5wbmc?x-oss-process=image/format,png
[github]: https://github.com/surmon-china/vue-video-player/blob/master/examples/04-video.vue?tdsourcetag=s_pcqq_aiomsg
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDcvMjAxOTA3MjExNjMyMTkzMjhfdy5wbmc?x-oss-process=image/format,png
[Link 1]: http://lbsyun.baidu.com/apiconsole/key
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy56dWlkYWltYS5jb20vaW1hZ2VzLzI0MDMwOC8yMDE5MDcvMjAxOTA3MjExNjM2MTU1MThfdy5wbmc?x-oss-process=image/format,png
[www.aquestian.cn]: http://www.aquestian.cn/