您的位置：首页 > Web前端 > HTML5

用HTML5播放IPCamera视频

2015-11-19 17:48 776 查看

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不行。

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

上一篇RJ45隔离变压器作用

下一篇VLC简介及使用说明(转自自由的风 » VLC简介及使用说明)

顶0 踩0

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

Html5服务器推送事件 HTML5之新增标签，CSS3，js特效教你玩转HTML(html5)h5网页设计，网站开发 HTML5基础视频课程 - 最实用的HTML教程 HTML5快速入门

浅谈html5 video标签嵌入视频让所有浏览器支持HTML5 video视频标签 HTML5-音频audio和视频video标签直接在低版本IE678浏览器中使用HTML5的audio和video标签播放视频音频的办法验证是否支持html5的Video标签及MP4视频播放

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航