前言

leaflet 入门开发系列环境知识点了解：

内容概览

leaflet视频监控播放
源代码 demo 下载

效果图如下：

本篇实现的思路：萤石官网，添加视频设备，然后开启直播获取直播或者监控视频流RTMP或者HLS，利用js插件ckplayer.js，在web网页结合leaflet在地图展示视频监控播放效果。
萤石官网也有很多示例，可以结合官网的文档参考
萤石官网：https://open.ys7.com
萤石开发文档：https://open.ys7.com/doc/zh/

  • 完整代码如下：
<!DOCTYPE html>

<html>

<head>

<title>视频图片监控demo</title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script src="videoJS/ckplayer/ckplayer/ckplayer.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<style>

html, body,#map {

height: 100%;

width: 100%;

margin: 0;

}

</style>

</head>

<body>

<div id='map'></div>

<img id='fullImg' height="100%" width="100%" style="margin:0;position:absolute;left:0;top:0;z-index:9999;display:none;"></img>

<script>

window.data = null;

$.ajax({

url : "http://localhost/gzsj/wechat/third/imgList",

type : 'GET',

dataType : 'json',

async: false,

data:{emcd:"1909030002",size:5},

success : function(data) {

console.log('success',data);

window.data = data.data;

},

error : function(msg) {

console.log('error',msg);

}

});

……

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

leaflet视频监控播放(附源码下载)的更多相关文章

  1. Zookeeper+websocket实现对分布式服务器的实时监控（附源码下载）

    ​ 我就是个封面 Zookeeper简介 Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统. 简单来说就是一个Zookeeper注册同步中心,内部结构为一个树形目录,每个节点上 ...

  2. leaflet图斑历史时空播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. Android 音视频深入 四 录视频MP4（附源码下载）

    本篇项目地址,名字是<录音视频(有的播放器不能放,而且没有时长显示)>,求star https://github.com/979451341/Audio-and-video-learnin ...

  4. leaflet实现风场图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. Android 音视频深入 十 FFmpeg给视频加特效（附源码下载）

    项目地址,求starhttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg(AVfilte ...

  6. Android 音视频深入 八 小视频录制（附源码下载）

    本篇项目地址,求starthttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/%E5%B0%8F%E ...

  7. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  8. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  9. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

随机推荐

  1. python+selenium +unittest生成HTML测试报告

    python+selenium+HTMLTestRunner+unittest生成HTML测试报告 首先要准备HTMLTestRunner文件,官网的HTMLTestRunner是python2语法写 ...

  2. SpringBoot：带你认认真真梳理一遍自动装配原理

    前言 Spring翻译为中文是“春天”,的确,在某段时间内,它给Java开发人员带来过春天,但是随着我们项目规模的扩大,Spring需要配置的地方就越来越多,夸张点说,“配置两小时,Coding五分钟 ...

  3. 理解Java对象序列化【转】

      原文链接:http://www.blogjava.net/jiangshachina/archive/2012/02/13/369898.html 关于Java序列化的文章早已是汗牛充栋了,本文是 ...

  4. JavaScript---1.计算机的编程基础

    学习内容:编程语言.计算机基础 1编程语言 程序员通过编程语言来控制计算机 编程语言:机器语言(计算机只认识机器语言).汇编语言(直接对硬件操作,指令采用英文缩写的标识符,容易记忆).高级语言(C\C ...

  5. 【Android - 自定义View】之不同事件的处理

    在Android的自定义View中,往往需要处理一系列的事件,如触摸事件.双击事件.缩放事件等.本文将这些事件及其处理进行总结.本文将持续更新,将我在自定义View的实践中用到的事件及其处理进行总结. ...

  6. 【Android - 控件】之MD - Snackbar的使用

    Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也 ...

  7. Ansible Playbooks 介绍 和 使用 二

    目录 handlers playbook 案例 2 handlers vars 变量 setup facts 变量使用 案例 inventory 中定义变量 案例 条件测试 when 语句 案例 迭代 ...

  8. supersocket/SocketEngin/BootstrapFactory.cs 详解

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using SuperSoc ...

  9. Nginx配置详细解析（全）

    一.nginx.conf文件结构 (1)共三部分:由全局块.events块.http块组成.http块又包含http全局块.server块:server块由多个location块组成. (2)一般情况 ...

  10. mac安装jupyter

    SaintKings-Mac-mini:.pip saintking$ pip install jupyter --user Collecting jupyter Downloading jupyte ...