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. 【转】linux在shell中获取时间 date巧用

    echo `date +%Y-%m-%d" %H:%M:%S"` 获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 date1=$(date --date ...

  2. redis学习（二）——String数据类型

    一.概述 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的 ...

  3. nova系列二：kvm介绍

    一 什么是kvm KVM 全称 Kernel-Based Virtual Machine.也就是说 KVM 是基于 Linux 内核实现的,这就使得linux内核本身就相当于一个Hypervisor. ...

  4. __attribute__ 机制详解(一)

    GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属性(Function Attribute).变量属性(Variable Attribute)和类型 ...

  5. Linux：一位猫奴的意外逆袭

    作者:Vamei,严禁任何形式转载. 1991年年中,林纳斯·托瓦兹(Linus Torvalds)在自己房间里敲着键盘.他全神贯注地盯着14寸的黑色屏幕,都没感觉到自己的小猫Randi在扒自己的裤腿 ...

  6. kafka环境搭建和使用(python API)

    引言 上一篇文章了解了kafka的重要组件zookeeper,用来保存broker.consumer等相关信息,做到平滑扩展.这篇文章就实际操作部署下kafka,用几个简单的例子加深对kafka的理解 ...

  7. NLP之——Word2Vec详解

    2013年,Google开源了一款用于词向量计算的工具--word2vec,引起了工业界和学术界的关注.首先,word2vec可以在百万数量级的词典和上亿的数据集上进行高效地训练:其次,该工具得到的训 ...

  8. 关于jsp中jstl-core标签循环遍历的使用

    JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这些,它还提供 ...

  9. 帮助小白，最新版JDK的安装与环境变量配置（Win 10系统）

    学习JAVA,必须首先安装一下JDK(java development kit java开发工具包),之后再配置环境变量就可以开始使用JAVA了. 一,安装JDK 1,可以选择到官网下载最新版本的JD ...

  10. 自己实现数据结构系列四---Queue

    一.代码部分 1.定义接口: public interface Queue<E> { void enqueue(E e); E dequeue(); E getFront(); int g ...