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. mysql 数据库磁盘占用量统计

    查看某个表的磁盘占用量 select (data_length+index_length)/1024/1024 M from information_schema.tables where table ...

  2. CustomScrollView + slivers + SliverAppBar

    import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends Statele ...

  3. k8s 节点的 NodeAffinity 使用

    apiVersion: apps/v1 # for versions before 1.9.0 use apps/v1beta2 kind: Deployment metadata: name: vi ...

  4. .NET Core 中的路径问题

    NET Core 应用程序相对于以前的.NET Framework 应用程序在启动运行的方式上有一定的差异,今天就来谈一谈这个获取应用程序启动路径的问题. 1.工作路径 WorkingDirector ...

  5. Java8之使用Optional进行Null处理

    Optional类这是Java 8新增的一个类,用以解决程序中常见的NullPointerException异常问题,本篇文章将详细介绍Optional类,以及如何用它消除代码中的null检查. 1. ...

  6. 深入理解Java虚拟机（类文件结构+类加载机制+字节码执行引擎）

    目录 1.类文件结构 1.1 Class类文件结构 1.2 魔数与Class文件的版本 1.3 常量池 1.4 访问标志 1.5 类索引.父索引与接口索引集合 1.6 字段表集合 1.7 方法集合 1 ...

  7. 【C#复习总结】多线程编程

    1 基本概念 前一篇文章做了铺垫,详见:http://www.cnblogs.com/mhq-martin/p/9035640.html 2 多线程 多线程的优点:可以同时完成多个任务:可以使程序的响 ...

  8. 莫比乌斯反演III

    "haik, hen wir." -- somebody 概述 莫比乌斯反演通过一些恒等变形使需要高时间复杂度计算的式子变为可快速计算的. 一般来说,将形如\(\sum_{d|n} ...

  9. HDU - 1698 线段树区间修改，区间查询

    这就是很简单的基本的线段树的基本操作,区间修改,区间查询,对区间内部信息打上laze标记,然后维护即可. 我自己做的时候太傻逼了...把区间修改写错了,对给定区间进行修改的时候,mid取的是节点的左右 ...

  10. 了解sso原理