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. 数组复制的五种方式（遍历循环一一赋值、System.arraycopy、地址赋值、克隆clone()、Arrays.copyof()）

    package com.Summer_0424.cn; import java.util.Arrays; import java.util.concurrent.CopyOnWriteArrayLis ...

  2. autoware

    在 Autoware目录下执行 git checkout 将版本切换到1.10.0 因为最新版驱动有问题然后执行 sudo apt-get update sudo apt-get install -y ...

  3. [Micropython]TPYBoard v202 利用单片机快速实现家庭智能控制平台

    一提到智能家庭,大家可能首先想到的是各种大佬级公司搞的牛逼产品,或者说是创新产品.想想就觉得很复杂,有的用工控机,有的用树莓派,还有的用arduino,不管用什么,都绕不过服务器进行控制,比如yeel ...

  4. Java发送Email邮件及SpringBoot集成

    一:普通方式发送 1.导包 <!--Java MAil 发送邮件API--> <dependency> <groupId>javax.mail</groupI ...

  5. c++_work

    while((ch=getopt(argc, argv, "X:Y:C:")) != EOF) { switch((char)ch) { case 'X': strcpy(strS ...

  6. Mysql权限操作、用户管理、密码操作

    Mysql的权限 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表. mysql权限表的验证过程为: 先从user表中的Host,Use ...

  7. NYOJ-16-矩形嵌套 记忆化搜索

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  8. matplotlib 入门之Image tutorial

    文章目录 载入图像为ndarray 显示图像 调取各个维度 利用cmp 获得像素点的RGB的统计 通过clim来限定rgb 标度在下方 插值,马赛克,虚化 matplotlib教程学习笔记 impor ...

  9. Masonry练习详解

    添加约束的方式: 1.通过使用NSLayoutConstraints添加约束到约束数组中,之前必须设置translatesAutoresizingMaskIntoConstraints = NO,即取 ...

  10. 用友云开放平台之API网关

    本文介绍选择API网关应考虑的几方面内容,API网关在微服务框架中的作用,API网关如何选型,用友云开放平台的API网关可以做什么. 随着互联网的快速发展,当前已步入移动互联.物联网时代.企业内部系统 ...