整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
时的工作中常会遇到一些系统集成的需求，需要在软件平台集成视频监控系统。而软件开发者往往不懂安防弱电系统，不知道如何在自己的软件界面中集成一些监控的实时画面。而监控厂家提供的SDK比较复杂，很难在短时间完成集成的任务。最终导致软件平台的一些功能无法实现，影响项目的质量。
本文提供的方法主要基于VLC播放器的ActiveX插件，通过这个插件，在网页中调用摄像机的RTSP流，实现图像的实时预览，音频的监听等等功能。文章以海康的IP网络摄像机为例给出具体的调用方法，供大家学习参照。
登录VLC官网 https://www.videolan.org/，选择windows（32位）版本下载。
下载VLC软件
运行安装文件
选择软件安装位置
一定记得要勾选网页浏览器插件
完成安装
可选用记事本（notepad）或专业的编辑器，输入如下代码，保存为html网页文件。
<html>
<body>
<title>TESTVDEIO-1-TEST</title>
<head>
<table>
<tbody>
<caption>视频监控演示</caption>
<tr>
<td>
<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:q66668888@172.16.200.88: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' />
</td>
<td>
<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:q66668888@172.16.200.89: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' />
</td>
</tr>
<tr>
<td>
<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:q66668888@172.16.200.89: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' />
</td>
<td>
<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:q66668888@172.16.200.88: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' />
</td>
</tr>
</tbody>
</table>
</object>
</body>
</html>代码编辑截图
具体请参看海康专业文档
先用Google Chrome浏览器测试，提示插件不支持。
Chrome浏览器提示插件不受支持
用微软IE测试，需要安装插件。
IE浏览器提示要安装ActiveX插件
确认安装插件
浏览器只显示了第一个画面。
IE浏览器显示不完整
用编辑器测试，2种内核都能正常显示。
编辑器里测试效果
改用360浏览器，呈现2X2的画面，实现最终的显示效果。
360浏览器显示的最终效果图
本文参考了一些专业文章，就不一 一列出了，在这一并谢过！
由于本人水平有限，有不对的地方敬请指正。文章旨在抛砖引玉，通过讨论，相互学习，共同进步。
我是WoNew弱电蜗牛，一名从业多年的弱电工程师，在头条传播弱电专业知识和行业信息，分享工作中的经验和心得。
喜欢我的文章或视频，欢迎点赞和转发。有疑问或建议，也欢迎留言，我会尽力解答。
端功能问题系列文章，点击上方合集↑
序言
大家好，我是大澈！
本文约2100+字，整篇阅读大约需要3分钟。
本文主要内容分三部分，如果您只需要解决问题，请阅读第一、二部分即可。如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。
感谢关注微信公众号：“程序员大澈”，然后加入问答群，从此让解决问题的你不再孤单！
网页中常见的多媒体文件包括音频文件和视频文件，对于在线音频和视频，我们往往都是使用embed标签来插入。embed语法：
1 <embed src="”视频地址”" type="”audio/x-pn-realaudio-plugin”"
2 console="”Clip1〃" controls="”ControlPanel,StatusBar”" height="”330〃"
3 width="”450〃" autostart="”true”" title="undefined">
<embed src="要播放的文件网址" ;="" autostart="true" loop="true" width="400"
height="350">
html中网页中如何插入音频和视频？
举例1：插入音频文件
1 <title>插入音频文件</title>
2
3
4 <embed src="media/西班牙舞曲.mp3" width="400px" height="80px">
在浏览器预览效果如下：
说明：
我们可以看到，使用embed标签插入音频文件还会有一个播放界面，界面上有几个简单的功能按钮。
举例2：插入视频文件
1 <title>插入音频文件</title>
2
3
4 <embed src="media/小苹果.wmv" width="400px" height="80px">
在浏览器预览效果如下：
注意：
由于音频和视频文件比较大，所以在这里我们就不提供大家在线测试的功能。不过大家可以在自己计算机上面测试一下代码。
使用embed标签插入视频，在浏览器我们也可以看到，浏览器提供了一个简单的操作界面。embed标签支持的视频格式很多，大部分主流格式都支持。
embed标签能支持大部分格式的视频文件，反正主流的如.mp4、.avi、.rmvb等都支持。如果你使用embed标签不能播放视频，那就可能是你视频格式有问题或者编码有问题。你可以用格式工厂转换一下格式。
以上就是html中网页中如何插入音频和视频？
*请认真填写需求信息，我们会在24小时内与您取得联系。
