我试图在IE8浏览器上动态播放avi视频

时间:2017-01-16 18:49:58

标签: javascript video internet-explorer-8 html4

我正试图在IE8浏览器上动态播放avi视频我的视频是AVI格式,用户将上传到我的服务器。我有一些测试HTML代码,这适用于播放视频的地方。

<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>

我想要实现的是将点击的视频推送到由javascript创建的视频播放器子div中,然后目标是在需要时将其从parentNode中删除。我并不担心这部分我只是想让视频播放。我在下面添加了相同的html代码到这个页面,由于某种原因,我的页面上的相同html代码也不起作用,但它独立工作。任何帮助将不胜感激,这必须是IE8似乎有一些错误的我如何托管这个网站。当我说我使用上面的代码时,因为那是一个带有本地视频的本地html文件。我的文件我试图使作品正在快递服务,即使视频存在于与html文件相同的位置,它似乎不能识别src在哪里。这是我的节点代码,为我提供我的html文件。

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 个答案:

答案 0 :(得分:1)

我想出了我自己的问题,我要做的就是创建一个公共文件夹并告诉我要服务器的文件在哪里。

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

现在一切正常,当有人点击其中时,我的视频会播放。