使用VLC Activex插件做网页版视频播放器

网上找的一个小例子，包括时长播放时间等等都有。

mrl可以设置本地文件，这样发布网站后只能播放本地有的文件，

如果视频文件全在服务器上，其他电脑想看的话，则可以IIS上发布个视频文件服务器，类似http://192.168.1.1:8000/video/1.flv  这样可以访问到视频文件，然后这个http路径可以设置为mrl
但这样的话经测试支持的格式不多，flv是可以的

测试可以使用  使用vlc播放器播放rtsp视频  这里的打开网络串流看能不能正常播放，如果播放不了，即使视频文件可以访问到这个插件也播放不了的

vlc开发相关参考 web网页中使用vlc插件播放相机rtsp流视频  这里不再讲解

 <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>视频剪辑</title>

<script type="text/javascript" charset="UTF-8">

<!-- 屏蔽右键

   // document.oncontextmenu=function(e){return false;}

//-->

var vlc; // VLC对象

var itemId;  // 播放列表中播放节目的id

var vlcSound; // vlc音量大小（初始化默认为50）

var videoLength; // 视频总时长

var then_time; // 播放开始时间(播放开始的日期，看下面实现代码，它是毫秒哦)

var isPlaying=0; // 是否播放状态 （0 未播放 1 播放）

// 初始化 === 很重要哦，控制程序的入口

function initPlayUrl(){

 vlc=document.getElementById("vlc");

 // 添加播放地址

 //vlc.playlist.add(window.opener.vdUrl);

 // 播放

 // vlc.playlist.play();

 // 添加播放地址方式2 -- 推荐用下面的方法控制播放列表

 var vedio_url=window.opener.vdUrl;

 itemId= vlc.playlist.add(vedio_url);

    vlc.playlist.playItem(itemId);

    // 获取VLC当前音量

    vlcSound=vlc.audio.volume;

    // 设置VLC音量值

    document.getElementById("vlc_sound").value=vlcSound;

    // 播放按钮不可用

    document.getElementById("play_button").disabled=true;

    // 检查播放节目的状态 -- 注意这个是延时操作哦（setTimeout以毫秒为单位，这里延时0.5秒）

    setTimeout(checkVedioStatus,500);

}

// 检查播放节目的状态

function checkVedioStatus(){

    if(vlc.input.state>2 && vlc.input.state<5){

     isPlaying=1;

     // vlc.input.time 当前播放时长，单位毫秒

     // vlc.input.length 节目总时长，单位毫秒

     videoLength=parseInt(vlc.input.length/1000);

     var temp_total_time=parseTime(videoLength);

     // 总时长设置

     document.getElementById("vedio_length").value=temp_total_time;

     // 当前可以输入时间段跳转

     document.getElementById("time_change").disabled=false;

     // 获得当前系统时间

     then_time=new Date().getTime();

     // 计算当前播放时间点

     checkTime();

    }else{

     // 如果不是播放状态就在延时执行

     setTimeout(checkVedioStatus,500);

    }

}

// 实时检测系统时间，计算视频的播放时长（典型的秒表功能）

function checkTime(){

 if(isPlaying==1){

  setTimeout("checkTime();",50);

  var temp_time=parseInt((new Date().getTime() - then_time)/1000);

  document.getElementById("current_video_time").value=parseTime(temp_time);

 }

}

// 改变播放地址

function changeNewBeginTime(){

 // vlc.input.time 获取当前播放时间（毫秒）/也可重设当前播放时间点

 var jumpTime=document.getElementById("change_length").value;

 if(jumpTime!=""){

  if(jumpTime>videoLength){

   alert("对不起，输入值大于视频总时长...");

   return;

  }

  vlc.input.time=jumpTime*1000;

  then_time=new Date()-jumpTime*1000;

 }

}

// 把秒转换为时间格式（HH：mm：ss）

function parseTime(numLength){

 var h_time=0;

 var m_time=0;

 var s_time=0;

 if(numLength>=60){

  m_time=parseInt(numLength/60);

  s_time=parseInt(numLength%60);

 }else{

  s_time=numLength;

 }

 if(m_time>=60){

  h_time=parseInt(m_time/60);

  m_time=parseInt(m_time%60);

 }

 if(h_time<10){

  h_time="0"+h_time;

 }

 if(m_time<10){

  m_time="0"+m_time;

 }

 if(s_time<10){

  s_time="0"+s_time;

 }

 return h_time+":"+m_time+":"+s_time;

}

// 停止播放

function stopPlay(){

 vlc.playlist.stop();

 isPlaying=0;

 // 修改播放/停止按钮状态

 document.getElementById("play_button").disabled=false;

    document.getElementById("stop_button").disabled=true;

    // 修改跳转按钮的状态

    document.getElementById("change_length").value="";

    document.getElementById("time_change").disabled=true;

    // 当前视频播放时间点清空

    document.getElementById("current_video_time").value="";

}

// 重新播放

function repeatPlay(){

 vlc.playlist.play();

 setTimeout(checkVedioStatus,500);

 // 修改播放/停止按钮状态

 document.getElementById("play_button").disabled=true;

    document.getElementById("stop_button").disabled=false;

}

// 静音

function noSound(){

 if(vlcSound>0){

  vlcSound=0;

 }

 vlc.audio.toggleMute();

 vlcSound=vlc.audio.volume;

 document.getElementById("vlc_sound").value=vlcSound;

 if(vlcSound==0){

  // document.getElementById("no_sound").value=" 恢复音量 ";

  document.getElementById("no_sound").value=" "+"恢复音量"+" ";

 }else{

  // document.getElementById("no_sound").value=" 静    音 ";

  document.getElementById("no_sound").value=" "+"静"+"  "+"音"+" ";

 }

}

// 音量加减

function soundChange(nums){

 if(nums<0 && vlcSound==0){

  alert("音量最小，不能再减少音量....");

  return;

 }

 vlcSound+=nums;

 if(vlcSound<=0){

  vlcSound=0;

  document.getElementById("no_sound").value=" "+"恢复音量"+" ";

 }else{

  // 当音量>0的时候，都要把静音的标识打开

  document.getElementById("no_sound").value=" "+"静"+"  "+"音"+" ";

 }

 if(vlcSound>200){

  alert("音量最大，不能再增大音量....");

  vlcSound=200;

 }

 vlc.audio.volume =vlcSound;

 document.getElementById("vlc_sound").value=vlcSound;

}

//全屏

function screenFull(){

  vlc.video.toggleFullscreen()

}

</script>

</head>

<body onload="initPlayUrl()" >

<!--[if IE]>

   <object type='application/x-vlc-plugin' id='vlc' events='True'

       classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' width="720" height="540">

          <param name='mrl' value='1.mp4' />

          <param name='volume' value='50' />

          <param name='autoplay' value='false' />

          <param name='loop' value='false' />

          <param name='fullscreen' value='false' />

    </object>

<![endif]-->

<!--[if !IE]><!-->

    <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540">

        <param name='mrl' value='1.mp4' />

        <param name='volume' value='50' />

        <param name='autoplay' value='true' />

        <param name='loop' value='false' />

        <param name='fullscreen' value='false' />

    </object>

<!--<![endif]-->

<br><br>

<input type="button" value=" 播    放 "  onclick="repeatPlay();" id="play_button">  

<input type="button" value=" 停    止 "  onclick="stopPlay();" id="stop_button">  

<input type="button" value=" 静    音 "  onclick="noSound();" id="no_sound">  

<input type="button" value=" 减少音量 "  onclick="soundChange(-10);">  

<input type="button" value=" 增大音量 "  onclick="soundChange(10);">  

<input type="button" value=" 全    屏 "  onclick="screenFull();">

    

                  

<font color="red" size="2">音量：</font><input type="text" id="vlc_sound" style="width: 40px;color: blue">

<br>

<font color="red" size="2">总时长：</font><input type="text" id="vedio_length" style="width: 65px;color: blue"> 

<input type="text" id="current_video_time" style="width: 65px;color: blue">

                    

           

<font color="red" size="2">跳转：</font><input type="text" id="change_length" style="width: 100px;color: blue">

<span style="color: blue;font-weight: normal;font-size: 14px">秒</span>

 

<input type="button" value="确定" id="time_change" disabled="disabled" onclick="changeNewBeginTime();">

</body>

</html>

使用VLC Activex插件做网页版视频播放器的更多相关文章

javascript实现移动端网页版阅读器
现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...
PotPlayer 1.6.52965 美化版|视频播放器
Potplayer播放器,基本上可以解析大部分的视频格式.作为单机版的视频播放器很不错的选择! Potplayer,只为播放而生! exp: 点击下载
使用vcastr22.swf做flash版网页视频播放器
flash的安装设置参考 Flash设置(各种版本浏览器包括低版本IE) 百度搜索下载vcastr22.swf文件然后使用方式很简单,浏览器安装flash相关插件就能看了视频路径主要在这里,视频 ...
【Egret】Native版本视频播放器（android）
前段时间,领导说客户要一个平板版本的视频播放器,把我们做的一些视频资源放进去,要是本地的:我们部门又没有app开发程序员,正好又前段我在实验egret的app打包功能,就说用egret做(ps:本来想 ...
Android 视频播放器切换到下个视频时残留上个视频画面的解决办法
最近在做一个Android视频播放器,遇到一个问题:切换到下一个视频时,中间会停留上一个视频的残存画面. 这是怎么回事? 我在网上找了很多资料,终于找到了原因:我是用自定义一个surfacev ...
Pyqt 音视频播放器
在寻找如何使用Pyqt做一个播放器时首先找到的是openCV2 openCV2 貌似太强大了,各种关于图像处理的事情它都能完成,如读取摄像头.图像识别.人脸识别. 图像灰度处理 . 播放视频等,强 ...
QT-简易视频播放器
一直没找到理由去学一下QT,由于工作原因之后的工作内容会用到QT,于是这两天摸索了下:早上临时决定先做个视频播放器玩一下,于是先用qml发现不会用,无果,于是放弃了使用qml,等之后系统的看一下Jav ...
Java视频播放器的制作
----------------siwuxie095 使用 Java Swing 框架制作一个简单的视频播放器: 首先到 Vid ...
Chrome插件-网页版BusHound
Chrome插件-网页版BusHound

随机推荐

《.NET 进阶指南》读书笔记2------定义不可改变类型
不可改变对象的定义一个类型的对象在创建后,它的状态就不能再改变,知道它死亡,它的状态一直维持与创建时相同.这时候称该对象具有不可改变性.这样的类型为不可改变类型. 不可改变对象在创建的时候,必须完全 ...
java:数据结构（二）栈的应用（进制转换全收集）
说到进制转换,java已经封装了基本的方法,在竞赛中使用封装的方法自然能节省大量时间另一位仁兄介绍的封装好的方法: https://blog.csdn.net/m0_37961948/article ...
QT之setstylesheet防止子窗体继承父窗体样式
/* 1.这里的#号表示,主控件不会影响子控件 2.设置多个样式,可以用双引号和分号 */ ui->groupBox_1->setStyleSheet("#groupBox_1{ ...
点击 Button触发事件将GridView1 CheckBox勾选的行添加到GridView2中
有时候想实现一个CheckBox选取功能,但是很多细节不是很清楚相信大家都有遇到类似的情况,直接看代码,如下: 前端代码GridView1,CheckBox控件设置 <asp:GridView ...
VMware小记
博主最近不知道为啥,有点手贱,折腾虚拟机. 然后某天,突然发现虚拟机连不上网,ping物理机,返回结果是不可达. 后来尝试各种手段,注意到VMware Network Adapter VMnet8和 ...
react this的作用域问题,麻烦大佬们帮我解决一下
element里面有个Table组件,我想在编辑和删除那里加上点击事件,但是发现点击方法没有效果这里面的this看起来好像只针对这个作用域里面的,这里没有办法设置状态,也不能调用方法设置状态会出现 ...
Codeception 实战
Codeception 测试 Php 代码一.一句话概述使用 cc 进行单元测试,保证现有代码质量,为以后维护与重构提供支撑. 二.目标安装配置 cc 编写测试代码,简化开发与最大化稳定性和可维 ...
力扣算法题—093复原IP地址
给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135", ...
Loj #2542. 「PKUWC2018」随机游走
Loj #2542. 「PKUWC2018」随机游走题目描述给定一棵 \(n\) 个结点的树,你从点 \(x\) 出发,每次等概率随机选择一条与所在点相邻的边走过去. 有 \(Q\) 次询问,每次 ...
slice 与 splice 的区别
slice: 定义一个数组:let b = ['a','b','c','d','e'] b:["a", "b", "c", "d& ...

使用VLC Activex插件做网页版视频播放器

使用VLC Activex插件做网页版视频播放器的更多相关文章

随机推荐

热门专题