使用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  >
<!--[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>

  

原文地址:https://www.cnblogs.com/jhlong/p/8352257.html

时间: 2024-10-16 00:34:08

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

网页嵌入视频播放器

一.嵌入windows media player <object id="MediaPlayer1" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" width="600&qu

javascript实现移动端网页版阅读器

现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们组团去书店看白书,也就是白看书.古老的木质书架上那一叠叠厚重的黄皮小说书,在年幼的我们眼里仿佛是比盘子里的午餐肉更加美味可口的东西. 而在当今这个信息化的时代,看书变得空前的便利,可是儿时那种期待和兴奋的感受却消失在了时间的长河. 岁月在流逝,时代在进步. 愿放下所有的浮躁,在新的时代愉快地生活,无

RTSP播放器网页web无插件直播流媒体音视频播放器EasyPlayer-RTSP-Android解码获取视频帧的方法

应用场景 EasyPlayer-RTSP在多年与VLC的对标过程中,积累了广泛的应用场景,EasyPlayer-RTSP底层与上层全部自主开发,自主知识产权,可实战测试. EasyPlayer-RTSP播放器 EasyPlayer-RTSP播放器是一套RTSP专用的播放器,包括有:Windows(支持IE插件,npapi插件).Android.iOS三个平台,是由青犀TSINGSEE开放平台开发和维护的区别于市面上大部分的通用播放器,EasyPlayer-RTSP系列从2014年初发展至今得到了

RTSP播放器网页web无插件直播流媒体音视频播放器libEasyPlayer-RTSP库接口调用说明

EasyPlayer-RTSP播放器EasyPlayer-RTSP播放器是一套RTSP专用的播放器,包括有:Windows(支持IE插件,npapi插件).Android.iOS三个平台,是区别于市面上大部分的通用播放器,EasyPlayer-RTSP系列从2014年初发展至今得到了各行各业(尤其是安防行业)的广泛应用,其主要原因是EasyPlayer-RTSP更加精炼.更加专注,具备非常低的延时,非常高RTSP协议兼容性,编码数据解析等方面,都有非常大的优势. libEasyPlayer-RT

轻松实现 网络视频播放器

最近用activeX media player做了个播放器,做过的人都知道,几乎没技术含量.在自己无聊的玩弄中,发现这个控件能够解析http.ftp协议,播放互联网的文件资源.现在被困在学校也无事可做,干脆把给这播放器写个服务器,用来播放互联网上的公开资源. media player的activeX控件十分强大,只需设置正确的url即可播放本地乃至互联网的文件资源.因此要给播放器做服务端,最重要的是向客户端传达正确的URL的信息.做服务器的思路便是:通过数据库记录下所有文件资源的信息与url,服

Android 视频播放器切换到下个视频时残留上个视频画面的解决办法

最近在做一个Android视频播放器,遇到一个问题:切换到下一个视频时,中间会停留上一个视频的残存画面. 这是怎么回事? 我在网上找了很多资料,终于找到了原因:我是用自定义一个surfaceview来显示画面的,切换视频时并没有将surfaceview显示的 内容做处理. 怎么解决? 知道原因,那就很好解决了. 首先,视频切换时,不再显示视频,及播放器不显示视频内容. 我找到了我代码中的这个方法:mVideoView.setRender(0); public void setRender(int

Pyqt 音视频播放器

在寻找如何使用Pyqt做一个播放器时首先找到的是openCV2 openCV2 貌似太强大了,各种关于图像处理的事情它都能完成,如 读取摄像头.图像识别.人脸识别.  图像灰度处理 . 播放视频等,强大的让你想不到! openCV2 播放视频也很简单: 1 #coding=utf-8 2 3 import cv2.cv as cv 4 filename = "cn.avi" 5 win_name = "video player" 6 capture = cv.Cap

网页视频播放器插件源码

1.ckplayer插件视频播放器 2.Flash插件播放器 <object type="application/x-shockwave-flash" data="video/vcastr3.swf" width="800" height="454" id="vcastr3"> <param name="movie" value="video/vcastr3.

网页视频播放器代码大全 + 21个为您的站点和博客提供的免费视频播放器

推荐 使用 极酷 Web在线播放器. 网页中嵌入视频代码综合全然版 1.avi格式 代码片断例如以下: 程序代码 <objectid="video"width="400"height="200"border="0"classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"> <paramname="ShowDisplay"v