Embedding VLC plugin on HTML page

Question

I have a html file  getStream html  that takes a stream from a certain url and show it  The code is the following    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt    lt head gt       lt meta content  text html  charset utf-8  http-equiv  Content-Type    gt       lt title gt Vids lt  title gt       lt link href  main css  rel  stylesheet  type  text css    gt   lt  head gt    lt body onload  player  http   mystreamaddress 8080     gt    lt div id  player  gt       lt object type  application x-vlc-plugin         id  vlcplayer         width  864px        height  540px         classid  clsid 9BE31822-FDAD-461B-AD51-BE1D1C159921  gt           lt param name  Volume  value  100    gt         lt param name  AutoPlay  value  true    gt         lt param name  AutoLoop  value  false    gt       lt  object gt   lt  div gt    lt div id  controls  gt     lt input type  button  onclick  play     value  Play    gt     lt input type  button  onclick  pause     value  Pause    gt     lt input type  button  onclick  stop     value  Stop    gt     lt input type  button  onclick  mute     value  Mute    gt   lt  div gt    lt script type  text javascript  language  javascript  gt      var vlc   document getElementById  vlcplayer        function player vid        try           var options   new Array   aspect-ratio 16 10    --rtsp-tcp     no-video-title-show          var id   vlc playlist add vid  Video  options         vlc playlist playItem id         vlc video fullscreen   true          vlc video toggleFullscreen              catch  ex          alert ex                          function mute        vlc audio toggleMute             function play        vlc playlist play             function stop        vlc playlist stop             function pause         vlc playlist togglePause            function fullscreen        vlc video toggleFullscreen          lt  script gt    lt  body gt    lt  html gt    If I have this page on my pc and I try open it  using IE 7 8 9   all works good  but If put this page on my server  and then I access to it from a url like this  http   myserver direcortyOfMyhtmlFile getStream html  the page is opened and the buttons are loaded  but I obtain the following error   in IE8 and IE9    That in english should be something like   Impossible obtain the value of property  add   object null or not defined   In IE7    These errors seems to refer to object in my html  but this is strange for me  because the same page works without problem locally

User · Answer

I found this piece of code somewhere in the web. Maybe it helps you and I give you an update so far I accomodated it for the same purpose... Maybe I don't.... who the futt knows... with all the nogodders and dobedders in here :-/

function runVLC(target, stream)
{
var support=true
var addr='rtsp://' + window.location.hostname + stream
if ($.browser.msie){
$(target).html('<object type = "application/x-vlc-plugin"' + 'version =  
"VideoLAN.VLCPlugin.2"' + 'classid = "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' + 
'events = "true"' + 'id = "vlc"></object>')
}
else if ($.browser.mozilla || $.browser.webkit){
$(target).html('<embed type = "application/x-vlc-plugin"' + 'class="vlc_plugin"' + 
'pluginspage="http://www.videolan.org"' + 'version="VideoLAN.VLCPlugin.2" ' + 
'width="660" height="372"' + 
'id="vlc"' + 'autoplay="true"' + 'allowfullscreen="false"' + 'windowless="true"' + 
'mute="false"' + 'loop="true"' + '<toolbar="false"' + 'bgcolor="#111111"' + 
'branding="false"' + 'controls="false"' + 'aspectRatio="16:9"' + 
'target="whatever.mp4"></embed>')
}
else{
support=false
$(target).empty().html('<div id = "dialog_error">Error: browser not supported!</div>')
}
if (support){
var vlc = document.getElementById('vlc')
if (vlc){
var opt = new Array(':network-caching=300')
try{
var id = vlc.playlist.add(addr, '', opt)
vlc.playlist.playItem(id)
}
catch (e){
$(target).empty().html('<div id = "dialog_error">Error: ' + e + '<br>URL: ' + addr + 
'</div>')
}
}
}
}
/* $(target + ' object').css({'width': '100%', 'height': '100%'}) */

Greets

Gee

I reduce the whole crap now to:

function runvlc(){
var target=$('body')
var error=$('#dialog_error')
var support=true
var addr='rtsp://../html/media/video/TESTCARD.MP4'
if (navigator.userAgent.toLowerCase().indexOf("msie")!=-1){
target.append('<object type = "application/x-vlc-plugin"' + 'version = "
VideoLAN.VLCPlugin.2"' + 'classid = "clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' + 
'events = "true"' + 'id = "vlc"></object>')
}
else if (navigator.userAgent.toLowerCase().indexOf("msie")==-1){
target.append('<embed type = "application/x-vlc-plugin"' + 'class="vlc_plugin"' + 
'pluginspage="http://www.videolan.org"' + 'version="VideoLAN.VLCPlugin.2" ' + 
'width="660" height="372"' + 
'id="vlc"' + 'autoplay="true"' + 'allowfullscreen="false"' + 'windowless="true"' + 
'mute="false"' + 'loop="true"' + '<toolbar="false"' + 'bgcolor="#111111"' + 
'branding="false"' + 
'controls="false"' + 'aspectRatio="16:9"' + 'target="whatever.mp4">
</embed>')
}
else{
support=false
error.empty().html('Error: browser not supported!')
error.show()
if (support){
var vlc=document.getElementById('vlc')
if (vlc){
var options=new Array(':network-caching=300') /* set additional vlc--options */
try{ /* error handling */
var id = vlc.playlist.add(addr,'',options)
vlc.playlist.playItem(id)
}
catch (e){
error.empty().html('Error: ' + e + '<br>URL: ' + addr + '')
error.show()
}
}
}
}
};

Didn't get it to work in ie as well... 2b continued...

Greets

Gee

User · Answer

test html is will be helpful for how to use VLC WebAPI   test html is located in the directory where VLC was installed   e g  C  Program Files  x86  VideoLAN VLC sdk activex test html  The following code is a quote from the test html   HTML    lt object classid  clsid 9BE31822-FDAD-461B-AD51-BE1D1C159921  width  640  height  360  id  vlc  events  True  gt     lt param name  MRL  value      gt     lt param name  ShowDisplay  value  True    gt     lt param name  AutoLoop  value  False    gt     lt param name  AutoPlay  value  False    gt     lt param name  Volume  value  50    gt     lt param name  toolbar  value  true    gt     lt param name  StartTime  value  0    gt     lt EMBED pluginspage  http   www videolan org      type  application x-vlc-plugin      version  VideoLAN VLCPlugin 2      width  640      height  360      toolbar  true      loop  false      text  Waiting for video      name  vlc  gt     lt  EMBED gt   lt  object gt    JavaScript   You can get vlc object from getVLC    It works on IE 10 and Chrome   function getVLC name        if  window document name                 return window document name             if  navigator appName indexOf  Microsoft Internet    -1                if  document embeds  amp  amp  document embeds name               return document embeds name             else    if  navigator appName indexOf  Microsoft Internet    -1                return document getElementById name            var vlc   getVLC  vlc        do something     e g  vlc playlist play

User · Answer

I found this    lt embed type  application x-vlc-plugin  pluginspage  http   www videolan org version  VideoLAN VLCPlugin 2   width  100           height  100   id  vlc  loop  yes autoplay  yes  target  http   10 1 2 201 8000   gt  lt  embed gt    I don t see that in your code anywhere      I think that s all you need and the target would be the location of your video     and here is more info on the vlc plugin  http   wiki videolan org Documentation 3aWebPlugin Input object  Another thing to check is that the address for the video file is correct

User · Answer

Unfortunately  IE and VLC don t really work right now     I found this on the vlc forums   VLC included activex support up until version 0 8 6  I believe  At that time  you could access a cab on the videolan and therefore  automatic  installation into IE and Firefox family browsers was fine  Thereafter support for activex seemed to stop  no cab  no activex component   VLC 1 0   once again contains activex support  and that s brilliant  A good decision in my opinion  What s lacking is a cab installer for the latest version    This basically means that even if you found a way to make it work  anyone trying to view the video on your site in IE would have to download and install the entire VLC player program to have it work in IE  and users probably don t want to do that  I can t get your code to work in firefox or IE8 on my boyfriends computer  although I might not have been putting the video address in properly    I get some message about no video output       I ll take a guess and say it probably works for you locally because you have VLC installed  but your server doesn t   Unfortunately you ll probably have to use Windows media player or something similar  Microsoft is great at forcing people to use their stuff    And if you re wondering  it appears that the reason there is no cab file is because of the cost of having an active-x control signed   It s rather simple to have your page use VLC for firefox and chrome users  and Windows Media Player for IE users  if that would work for you

[javascript] Embedding VLC plugin on HTML page

Examples related to javascript

Examples related to html

Examples related to plugins

Examples related to vlc