1. 背景

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

2. 示例代码

<!DOCTYPE html>

<html>

<head>

<title>web camera</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

 //仅适用于IE浏览器是，并且安装有vlc插件，则返回true；

    function isInsalledIEVLC(){

        var vlcObj = null;

        var vlcInstalled= false;

        try {

            vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.1");

            if( vlcObj != null ){

                vlcInstalled = true

            }

        } catch (e) {

            vlcInstalled= false;

        }

        return vlcInstalled;

    }   

    //仅适用于firefox浏览器是，并且安装有vlc插件，则返回true；

    function isInsalledFFVLC(){

         var numPlugins=navigator.plugins.length;

         for  (i=0;i<numPlugins;i++){

              plugin=navigator.plugins[i];

              if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1){

                 return true;

            }

         }

         return false;

    }  

    /* 浏览器检测 */

    function checkBrowser(){

        var browser=navigator.appName;

        var b_version=navigator.appVersion;

        var version=parseFloat(b_version);

        var download_url = "https://download.videolan.org/pub/videolan/vlc/2.2.1/win32/";

        if ( browser=="Netscape"  && version>=4) {

            if(isInsalledFFVLC()){

                //alert("已装VLC插件");

            }else{

                alert("未装VLC插件,请先安装插件");

                location.href=download_url;

            }

        }else if(browser=="Microsoft Internet Explorer" && version>=4) {

            if(isInsalledIEVLC()){

                //alert("已装VLC插件");

            }else{

                alert("未装VLC插件,请先安装插件");

                location.href=download_url;

            }

        }

    }

</script>

</head>

<body bgcolor="white" text="black" onload="checkBrowser();">

<embed type="application/x-vlc-plugin" pluginspage="http://www.videola.org"

    width="640" height="480" id="vlc" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no"

    target="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" >

</body>

</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. hdu4966 GGS-DDU

    hdu4966 GGS-DDU 有 \(n\) 个课程,每种课程有 \(a_i\) 级,一开始你每种课程都为 \(0\) 级,有 \(m\) 个升级方案:\((x,\ l1,\ y,\ l2,\ c) ...

  2. 20175310 《Java程序设计》第8周学习总结

    20175310 <Java程序设计>第8周学习总结 本周博客: https://www.cnblogs.com/xicyannn/p/10722004.html 教材学习内容总结 这周学 ...

  3. Linux内核入门到放弃-进程虚拟内存-《深入Linux内核架构》笔记

    进程地址空间的布局 <mm_types.h> <mm_types.h> struct mm_struct { ... unsigned long (*get_unmapped_ ...

  4. MySQL笔记--注意

    replace into 和 insert into..... on duplicate key update的异同 同:1. 当key不存在时,两者相同,都是插入一条数据2. key存在时,执行两者 ...

  5. Apache Spark 内存管理详解（转载）

    Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行性能调优.本文旨在梳理出 ...

  6. ML.NET 示例：回归之销售预测

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  7. HBase篇(2)-数据模型与操作

    HBase其实就是一个数据库,无非就是存储和增删改查,那我们先从数据模型说起把 这里有一张表,是用关系型数据库的思维画出来的表,这样比较易于理解: 概念 Table(表格) 没啥说的,和关系型数据库一 ...

  8. 谈谈自己体会到的HTML5

    # 谈谈自己体会到的HTML5 很多介绍HTML5的文章,都是从以下几个方面去介绍的:语义化.丰富的表单.本地存储.多媒体.地理位置等等.纸上得来终觉浅,现在有了一定的实践经验之后,本人对其有了更加深 ...

  9. 朱晔的互联网架构实践心得S1E5：不断耕耘的基础中间件

    朱晔的互联网架构实践心得S1E5:不断耕耘的基础中间件 [下载本文PDF进行阅读] 一般而言中间件和框架的区别是,中间件是独立运行的用于处理某项专门业务的CS程序,会有配套的客户端和服务端,框架虽然也 ...

  10. java----牛客练习

    1. 形式参数就是函数定义时设定的参数.例如函数头 int min(int x,int y,int z) 中 x,y,z 就是形参.实际参数是调用函数时所使用的实际的参数.   真正被传递的是实参   ...