博客

IE8下实现视频播放

  • Post author:
  • Post category:其他


首先需要下载vidoe.js文件，在页面(test.html)中引用： 

<!DOCTYPE HTML>
<html>
    <head>
        <title>TEST</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/video/video-js.css" type="text/css" /> 
        <script src="js/video/video.js"></script>
        <script src="js/test.js"></script>
        <script>
             videojs.options.flash.swf = "js/video/video-js.swf";
        </script>
    </head>
    <body style="overflow: hidden">
        <div style="width:100%;height:100%"> 
        <div>
            <video id="video_id" class="video-js vjs-default-skin" controls="controls" preload="none" autoplay="autoplay" width="100%" height="500px"  data-setup="{}">
              <source id="source_id"></source>
            </video>
        </div>
        </div>
    </body>
</html>

在test.js文件中： 

$(function(){ 
    init(path);
});

function init(path){
    $('#source_id').attr('src',path);
    $('#source_id').attr('type','video/mp4');
}

path是视频的路径名，注意，该插件与单纯的video标签不一样，不能在播放视频的页面加载完成后，再给标签赋src路径值，必须在初始化页面时直接赋值，否则会导致视频无法播放，想要动态加载视频，可以通过页面跳转实现（只需在跳转时给出要播放的视频地址即可）。此外，IE8需要flash插件才能播放视频，初次运行会有英文提示要用户下载flash，可以在video.js中修改提示语，改成中文提示及flash下载地址。


版权声明：本文为wojiaoguchenghuanye原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。