1. 背景

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

2. 示例代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>web camera</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <script type="text/javascript">
  7.  //仅适用于IE浏览器是，并且安装有vlc插件，则返回true；
  8.     function isInsalledIEVLC(){
  9.         var vlcObj = null;
  10.         var vlcInstalled= false;
  11.         try {
  12.             vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.1");
  13.             if( vlcObj != null ){
  14.                 vlcInstalled = true
  15.             }
  16.         } catch (e) {
  17.             vlcInstalled= false;
  18.         }
  19.         return vlcInstalled;
  20.     }   
  21.  
  22.     //仅适用于firefox浏览器是，并且安装有vlc插件，则返回true；
  23.     function isInsalledFFVLC(){
  24.          var numPlugins=navigator.plugins.length;
  25.          for  (i=0;i<numPlugins;i++){
  26.               plugin=navigator.plugins[i];
  27.               if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1){
  28.                  return true;
  29.             }
  30.          }
  31.          return false;
  32.     }  
  33.  
  34.     /* 浏览器检测 */
  35.     function checkBrowser(){
  36.         var browser=navigator.appName;
  37.         var b_version=navigator.appVersion;
  38.         var version=parseFloat(b_version);
  39.         var download_url = "https://download.videolan.org/pub/videolan/vlc/2.2.1/win32/";
  40.         if ( browser=="Netscape"  && version>=4) {
  41.             if(isInsalledFFVLC()){
  42.                 //alert("已装VLC插件");
  43.             }else{
  44.                 alert("未装VLC插件,请先安装插件");
  45.                 location.href=download_url;
  46.             }
  47.         }else if(browser=="Microsoft Internet Explorer" && version>=4) {
  48.             if(isInsalledIEVLC()){
  49.                 //alert("已装VLC插件");
  50.             }else{
  51.                 alert("未装VLC插件,请先安装插件");
  52.                 location.href=download_url;
  53.             }
  54.         }
  55.     }
  56. </script>
  57.  
  58. </head>
  59.  
  60. <body bgcolor="white" text="black" onload="checkBrowser();">
  61.  
  62. <embed type="application/x-vlc-plugin" pluginspage="http://www.videola.org"
  63.     width="640" height="480" id="vlc" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no"
  64.     target="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" >
  65.  
  66. </body>
  67. </html>

注意：不管本地操作系统是 32 位还是 64 均需安装 32 位的 VLC 播放器，否则插件无法成功安装

参考：利用vlc插件将IP摄像头嵌入网页和网页播放RTSP流

在 Web 页面使用 VLC 插件播放 m3u8 视频流 (360 极速模式)的更多相关文章

  1. EasyNVR、EasyDSS二次开发之：RTMP、HLS流在web页面进行无插件播放示例Demo代码

    不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势.对于传统的浏览器插件播放谁用谁知道: 以上是软件自带播放展示 背景需求 对于EasyNVR和EasyDSS ...

  2. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

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

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

  4. php使用播放插件播放m3u8,mp4,flv格式的视频

    一.这里我主要是播放m3u8的视频,有两款比较好的插件,swise和ckpalyer,我介绍的是ckplayer,这是在pc端播放的,并且是需要flash支持的,不过现在的最新浏览器都是默认安装的 二 ...

  5. 谷歌/微软/必应web页面免费翻译插件

    随着网络时代的日益壮大,现在我们经常需要浏览一些各种外语的网页,或者是查阅资料帮助我们解决问题.更多的时候还是头疼在语言障碍上,正所谓"它认识你,你不认识它啊."谷歌和微软两个企业 ...

  6. Web页面使用VLC播放插件

    一.原生态Demo下载 选择原因:我们为什么选择VLC播放插件?原因是它支持IE8浏览器播放视频,如果高版本的浏览器大可不必选择该插件,很多html5插件既好用又简单,但是有些交管或政府 部门还是限制 ...

  7. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

  8. jenkins初始化启动报错导致进入web页面如法安装插件

    报错如下图所示: 解决方法: #1 查看网卡设置是否正确 #2 确定是否设置域名服务器 #3 查看路由表是否正常 #4 确保可用dns解析 #5 ping一下常见的公网地址

  9. 【转】Hadoop web页面的授权设定

    转载自过往记忆(http://www.iteblog.com/)本文链接地址: <Hadoop web页面的授权设定>(http://www.iteblog.com/archives/98 ...

随机推荐

  1. JSONPath介绍

    1. JSONPath介绍 官网地址: https://github.com/alibaba/fastjson/wiki/JSONPath fastjson 1.2.0之后的版本支持JSONPath. ...

  2. ExFilePicker的使用 — 获取本地图片资源并用RecyclerView展示出来

    代码其实很简单,所以就不多进行文字说明,直接上完整的代码: 第一步:在app/build.gradle添加需要使用到的依赖库:(这里对引用的版本冲突问题作了处理,详情请看链接:https://www. ...

  3. 记一次Dubbo服务注册异常

            公司项目重构,把dubbo版本从2.5.8升级为2.6.2.升级后在本地运行一点问题都没有:可是通过公司自研的发布系统将项目发布到测试环境的linux服务器下面后,出现了dubbo服务 ...

  4. keras神经网络三个例子

    keras构造神经网络,非常之方便!以后就它了.本文给出了三个例子,都是普通的神经网络 例一.离散输出,单标签.多分类 例二.图像识别,单标签.多分类.没有用到卷积神经网络(CNN) 例三.时序预测, ...

  5. HBase篇(5)- BloomFilter

    [每日五分钟搞定大数据]系列,HBase第五篇.上一篇我们落下了Bloom Filter,这次我们来聊聊这个东西. Bloom Filter 是什么? 先简单的介绍下Bloom Filter(布隆过滤 ...

  6. JWT认证原理及使用

    一.JWT原理: 参考文章:https://www.jianshu.com/p/180a870a308a 1.传统的登录方式: 浏览器输入用户名密码,服务端校验通过,根据用户信息生成一个token,将 ...

  7. GitHub和Git超超超详细使用教程

    GitHub的简单使用第一步 创建GitHub账号1. 打开GitHub官网.2. 点击绿色按钮Sign up for GitHub,填写用户名,邮件地址和密码.注意: 用户名只能包含字母和" ...

  8. js压箱底的宝贝

    框架的确好用, 不过他们也隐藏了JavaScript中丑陋的细节和DOM的运作机制. 如果你的目标是敢于自称"我懂JavaScript", 那么花时间学习框架无异于南辕北辙. 下面 ...

  9. maven用框架编写网页运行出现HTTP Status 500 - Unable to compile class for JSP

    利用maven整合框架的时候,通过浏览器访问时,如果出现  HTTP 500-Unable to compile class for JSP 的错误,应该怎么解决呢? 之前在网上看了好多人的解决方案. ...

  10. Velocity中为什么要使用{}来明确标识变量

    原因 比如在页面中,页面中有一个$someonename,此时,Velocity将把someonename作为变量名,若我们程序是想在someone这 个变量的后面紧接着显示name字符,则上面的标签 ...