HTML5增加了vedio标签,能直接播放视频,但是播放的格式是有限的。

这里将IPCamera的视频转换OGG格式,再通过HTML5网页播放,播放还是很清晰的。IPCamera要支持RTSP等视频流协议,taobao上100多的很多IPCamera都支持。这里所有的操作都是同一台电脑上进行.

电脑上要装的软件:
VLC    V2.1.3 视频转码软件
Apache V2.2   HTTP服务器
IPCamera IP地址:192.168.1.11
电脑IP:192.168.1.10

一,通过VLC转码
1.Media->Stream->Network,输入IPCamera的视频流地址,这个地址可以问卖摄像头的人要,或直接问厂家要,我的地址为:

rtsp://192.168.1.11:554/user=admin&password=&channel=1&stream=0.sdp?real_stream

2.点击底下的Stream->Next->Http,点击Add->在Path处写上/stream,转换出来的视频流地址为http://192.168.1.10:8080/stream

3.点击Next->选择要转换成的编码格式:Video-Theora+Vorbis(OGG)

4.点击Next->Stream即可,这时VLC标题栏显示Streaming,说明已经在转码

二,网页
Apache的安装使用很简单,不懂的地方可参考下网上的.我安装的目录为D:\Apache2.2,
网页的路径默认在D:\Apache2.2\htdocs,该目录下的文件只有一个index.html:
index.html内容:
<!DOCTYPE html>
<html>
<body>
<video controls>  
  <source src="http://192.168.1.10:8080/stream" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>
二, 打开浏览器,输入电脑的IP地址192.168.1.10,点击左下角的“播放”即可播放视频.浏览器要用chrome的,试了IE不行。

版权声明:本文为博主原创文章,未经博主允许不得转载。

0

0
主题推荐
html5 视频 标签
猜你在找
 

用HTML5播放IPCamera视频的更多相关文章

  1. html5播放mp4视频代码

    1.nginx支持flv和mp4格式播放 默认yum安装nginx centos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的 # nginx -V查看是否安 ...

  2. H5外包团队:使用HTML5播放短视频代码分享

    滑动代码 /** * 滑动处理 */ function Touch() { this.init(); } Touch.fn = Touch.prototype; Touch.fn.init = fun ...

  3. html5播放m3u8视频,web端看直播

    https://github.com/jiqing9006/hLive <!DOCTYPE html> <html> <head> <meta charset ...

  4. 不完全解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)

    首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...

  5. Android WebView 总结 —— 使用HTML5播放视频及全屏方案

    在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...

  6. Html5 播放Hls格式视频

    二群号为766718184 ,博主提供Ffmpeg.GB28181视频教程 播放地址: http://www.iqiyi.com/u/1426749687  移动端Html5支持Hls格式视频播放,创 ...

  7. Android中webview html5 自动播放本地视频

    MainActivity代码 public class Html5VideoAutoPlay extends Activity { WebView webview = null; @Override ...

  8. html5 播放多个视频。一个接一个的播放

    new个video,指定播放列表的第一个视频路径为src.监听end事件,回调里面把video的src改成列表的下一个,再play. 示意代码:var vList = ['视频地址url1', 'ur ...

  9. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

随机推荐

  1. firefox下reset()不好使的问题

    最近在测试项目时发现,在firefox下,form.reset()方法对于隐藏的<input>等不起效果,导致程序中出现了错误,以下面为例: js代码: document.agentFor ...

  2. ES6.0 Generator 三种用法

    // Generator start ------- thunk 用法 const Thunk = function(fn) { return function (...args) { return ...

  3. 基于TextRank提取关键词、关键短语、摘要

    一.TextRank原理 TextRank是一种用来做关键词提取的算法,也可以用于提取短语和自动摘要.因为TextRank是基于PageRank的,所以首先简要介绍下PageRank算法. 1. Pa ...

  4. PyCharm Debug调试程序

    步骤一:在代码区要进行调试的代码行左侧单击鼠标左键,添加调试断点符号 步骤二:右键单击源文件或代码区内部,弹出菜单,选择[Debug ***] 或在右上角工具栏区单击[debug]按钮,快捷键[shi ...

  5. netscope-支持caffe的在线可视化工具-转载

    Netscope是个支持prototxt格式描述的神经网络结构的在线可视工具,地址是here,可以用来可视化Caffe结构里prototxt格式的网络结构. Netscope使用起来也非常简单,打开这 ...

  6. Tensorflow中的滑动平均模型

    原文链接 在Tensorflow的教程里面,使用梯度下降算法训练神经网络时,都会提到一个使模型更加健壮的策略,即滑动平均模型. 基本思想 在使用梯度下降算法训练模型时,每次更新权重时,为每个权重维护一 ...

  7. POJ 1142:Smith Numbers(分解质因数)

                                   Smith Numbers Time Limit: 1000MS   Memory Limit: 10000K Total Submiss ...

  8. android 学习过程中登陆失效的个人理解

    今天在学习的过程中,要做登陆失效的功能,所以就找了些资料.好好看了一下.研究了一番,慢慢的做出来了! 比方:你在一个手机端登陆了账号,在另外的一个手机端也登陆了账号,此时.前一个手机端的账号会提示登陆 ...

  9. TensorFlow笔记-04-神经网络的实现过程,前向传播

    TensorFlow笔记-04-神经网络的实现过程,前向传播 基于TensorFlow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数),得到模型 张量(tenso ...

  10. 大数阶乘 nyoj

    大数阶乘 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 我们都知道如何计算一个数的阶乘,可是,如果这个数很大呢,我们该如何去计算它并输出它?   输入 输入一个整数 ...