2017-01-16 5 views
-1

IE8ブラウザでavi動画を動的に再生しようとしています。私の動画はAVI形式で、ユーザーは自分のサーバにアップロードします。私はいくつかのテストhtmlコードを持っており、これはビデオを再生する場所で動作します。IE8ブラウザでavi動画をダイナミックに再生しようとしています

<html> 
<body> 
    <object id="MediaPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" hspace="0" vspace="0" standby="Loading Microsoft Windows Media Player components..."> 
<param name="Filename" value="toy_plane_liftoff.avi""> 

<embed type="application/x-mplayer2" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" autoplay="false" autostart="false" 
height="330" width="360" loop="false" controls="false" allowFullscreen="True" src="toy_plane_liftoff.avi""> 
</object> 
</body> 
</html> 

私は私が私のJSONファイルからビデオの私のリストを構築することを決めた。この作業を得た後、誰かが動画をクリックしたときに、私はブラウザにJavaScriptを使用して、このhtmlコードを埋め込むだろうし、うまくいけば、ビデオを再生します。これは私の新しいHTML

<html> 

<head> 
    <script> 
    function loadDoc(){ 
     var url = "./getJsonData"; 
     var xdr = new XDomainRequest(); 

     xdr.onload = function(){ 
      var videoName = []; 
      var obj; 
      var response = xdr.responseText; 
      obj = JSON.parse(response); 
      for(var i = 0; i < obj.SopVideo.length; i++){ 
       var something = obj.SopVideo[i]; 
       videoName.push(something[0].Name); 

      } 
      var list = document.createElement('ul'); 
      list.setAttribute('id', "videoList"); 
      for(var i = 0; i < videoName.length; i++){ 
       var item = document.createElement('li'); 
       var createA = document.createElement('a'); 
       createA.setAttribute('href', "#"); 
       item.setAttribute('id', videoName[i]); 


       item.appendChild(createA); 

       item.appendChild(document.createTextNode(videoName[i])); 
       list.appendChild(item); 
      } 

        document.getElementById('videoName').appendChild(list); 
        var ul = document.getElementById('videoList'); 
        ul.attachEvent('onclick', function(e) { 
          //alert(e.srcElement.nodeName); 
          var videoID = e.srcElement.id; 
          playVideo(videoID); 
        }); 


     }; 
     xdr.onerror = function() { 
      alert("error happened") 
     }; 
     xdr.open('get', url); 
     xdr.send(); 

    } 

    function playVideo(id){ 
     var hidInputValue = document.getElementById('hidInput').value; 



     if(hidInputValue == "true"){ 
     var elem = document.getElementById('videoPlayerChild'); 
     elem.parentNode.removeChild(elem); 
     } 
     var videoChildObject = document.createElement('div'); 
     videoChildObject.setAttribute('id', "videoPlayerChild"); 
     document.getElementById('videoPlayer').appendChild(videoChildObject); 

     var videoObject = '<object id="mediaplayer1" classid=CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" hspace="0" vspace="0" standby="Loading Microsoft Windows Media Player components...">' + 
          '<param name="Filename" value="'+id+'">'+ 
          '<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" autoplay="false" autostart="false"'+ 
          'height="330" width="360" loop="false" controls="false" allowFullscreen="True" scr="'+id+'">'+ 
          '</object>'; 

     var content = document.querySelectorAll('[id="videoPlayerChild"]')[0]; 
     content.innerHTML = videoObject; 

    } 
    </script> 
</head> 

<body onload="loadDoc()"> 
    <div id="videoName"></div> 
    <div id="videoPlayer"> 
    </div> 
    <object id="MediaPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" hspace="0" vspace="0" standby="Loading Microsoft Windows Media Player components..."> 
<param name="Filename" value="toy_plane_liftoff.avi""> 

<embed type="application/x-mplayer2" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" autoplay="false" autostart="false" 
height="330" width="360" loop="false" controls="false" allowFullscreen="True" src="toy_plane_liftoff.avi""> 
</object> 
    <input type="hidden" value="false" id="hidInput"> 
</body> 

</html> 

である私は、その後の目標ははparentNodeからそれを削除することですジャバスクリプトによって作成されたビデオプレーヤー子のdivにクリックされた映像を無理に勧めている達成しようとしているかのI必要。私はその部分について心配していません。ただビデオを再生しようとしています。私はこのページに以下のように働いた同じhtmlコードを追加しました。何らかの理由で私のページ上の同じHTMLコードが動作しませんでしたが、それは独立して動作します。どんな助けも大いに評価されるでしょう。これはIE8のためでなければなりません。私がこのサイトをどのようにホストしているかに間違っているようです。私は、上記のコードを使って作業していたと言いました。これは、それがローカルビデオのローカルHTMLファイルであるからです。私のファイル私は仕事をするようにしようとしているが、たとえビデオがHTMLファイルと同じ場所に存在しても、srcがどこにあるかを認識していないように見えます。 。

app.get('/RapVideo', function(req, res) { 
res.sendFile(path.join(__dirname + '/test/videotest.html')) 
}); 

// my app is listening on localhost port 8080 for the post to be called 
var server = app.listen(8080, function() { 
    console.log('Listening on port ' + server.address().port) 
}); 

答えて

1

私がしなければならなかったことは、パブリックフォルダを作成し、サーバーに保存するファイルがどこにあるかを明示することでした。

app.use(express.static('public')) 

誰かがクリックするとすべて再生され、動画は再生されます。

関連する問題