找半天,HTML5的可以支持RTMP 但是无法播放RTSP,flash也止步于RTMP,最后同事推荐了个开源的好东东 VLC ,请教谷歌大神之后,这货果然可以用来让各浏览器(IE activex方式,谷歌、FF)实现播放RTSP视频流,那真是极好的~~ 废话不多说了附上参考文档和案例,大家自己看吧。

视频是用的海康网络摄像头(支持RTSP,标准H.264 RTP封装的设备),可以通过 rtsp://admin:12345@192.0.0.64:81/h264/ch1/main/av_stream  对摄像头进行读取RSTP流。在谷歌浏览器下实现web显示实时监控画面步骤:

1. 下载vlc -  http://www.videolan.org/vlc/  开源的好东西,并安装(本人测试系统为WIN8.1 64bit 下载32bit的就可以,XP也没问题);

2. 安装,并勾选Mozila支持;

3. 实时播放代码如下

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
<param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false' />
<param name='controls' value='false' />
</object>

代码中的具体参数含义,大家可以移步这里:

https://wiki.videolan.org/Documentation:WebPlugin/

说明文档很详细,可以使用JS进行各种操作,修改视频地址、建立播放列表、暂停、播放、音量控制等。

谷歌浏览器Chrome播放rtsp视频流解决方案的更多相关文章

  1. Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理

    Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理 方案一:服务器端用 websocket 接受 rtsp ,然后,推送至客户端 实现步骤: 方案二:使用 ffmpeg + nginx 把 ...

  2. 浏览器无插件播放rtsp流解决方案

    1. 安装 FFmpeg 参考 CentOS下安装FFmpeg,特别详细. 我遇到的错误和解决办法: 缺少lame ffmpeg+libmp3lame库源码安装教程(CentOS) make ffmp ...

  3. HTML5外包团队-技术分享【使用HTML5的VIDEO标记播放RTSP视频流】

    使用HTML5的VIDEO播放RTSP实时视频流源代码: <!DOCTYPE html> <html><head> <meta http-equiv=&quo ...

  4. 浏览器播放rtsp流媒体解决方案

    老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧.    说这个之前,还是先说一下什么是rtsp协议吧. RTSP(Real Time Streaming ...

  5. 使用Gin+WebSocket在HTML中无插件播放RTSP

    在后台的开发中遇到了对接显示摄像头视频流的需求.目前获取海康及大华等主流的摄像头的视频流使用的基本都是RTSP协议.不过HTML页面并不能直接播放RTSP协议的视频流,查询了一番各种网页播放RTSP的 ...

  6. 【FFmpeg】ffplay播放rtsp视频流花屏问题

    问题描述:ffplay播放rtsp视频流时,播放过程中随机出现花屏现象. 基本流程学习:阅读ffplay源码,熟悉其播放rtsp视频流的基本流程. 在ffplay源码阅读和分析的基础上,画出了其播放r ...

  7. 【FFmpeg】ffplay播放rtsp视频流花屏问题 (转)

    问题描述:ffplay播放rtsp视频流时,播放过程中随机出现花屏现象. 基本流程学习:阅读ffplay源码,熟悉其播放rtsp视频流的基本流程. 在ffplay源码阅读和分析的基础上,画出了其播放r ...

  8. 使用canvas来实时播放RTSP视频

    HTML5的标签可以用使用下来面的方式来播放静态视频 <video width="320" height="240" controls="con ...

  9. 在 Web 页面使用 VLC 插件播放 m3u8 视频流 (360 极速模式)

    1. 背景 公司有个旧项目需要添加在线播放 m3u8 视频流,但是该流不知道什么原因使用 Video.js 或 hls.js 均无法播放,最后找到解决方案可使用 VLC 插件播放(360 极速模式下) ...

随机推荐

  1. java之装饰器模式

    Decorator Pattern(装饰器模式),定义:Attach additional responsibilities to an object dynamically. Decorators  ...

  2. python --- json模块和pickle模块详解

    json:JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式(用于数据序列化和反序列化).(适用于多种编程语言,可以与其他编程语言做数据交换 ...

  3. centos7基础学习第一天

    Linux是一个操作系统: 智能手机,Android和ios.Windows: 网站.游戏.QQ.微信等都是运行在Linux系统之上的应用:客户端.服务器端交互的: Linux的起源: Linux之前 ...

  4. Ubuntu16.04 install OpenJDK8

    1.按Ctrl + Alt + T打开终端.打开后,运行下面的命令来添加PPA:sudo add-apt-repository ppa:openjdk-r/ppa2.之后,更新系统包缓存并安装Open ...

  5. Python二维数据分析

    一.numpy二维数组 1.声明 import numpy as np #每一个[]代表一行 ridership = np.array([ [ 0, 0, 2, 5, 0], [1478, 3877, ...

  6. ZOJ2345Gold Coins 简单分块

    昨天做过一样的题: 平方和公式:n*(n+1)*(2n+1) #include<cstdio> #include<cstdlib> #include<iostream&g ...

  7. Laravel框架使用查询构造器实现CURD

    一.什么是查询构造器? ①Laravel 查询构造器(query Builder)提供方便,流畅的接口,用来建立及执行数据库查找语法 ②使用PDO参数绑定,以保护应用程序免于SQL注入因此传入的参数不 ...

  8. 使用C#系统服务定时执行操作

    1.新建项目 --> Windows 服务 2.Service1.cs代码 using System; using System.Collections.Generic; using Syste ...

  9. windows下Maven的安装与配置

    1 安装maven前首先确认计算机已正确安装JDK2 下载maven 地址:http://maven.apache.org/download.html安装文件格式如下:apache-maven-3.0 ...

  10. angular添加,查找与全部删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...