jPlayer不支持IE 7,8,9

时间:2013-10-02 10:56:00

标签: javascript html5 internet-explorer html5-video jplayer

我正在尝试使用jPlayer从网址嵌入视频文件。

这是我正在使用的代码。这在Chrome和Firefox中完全正常,但在Internet Explorer 7,8或9中没有。显示视频框,它在视频框下显示错误消息。

jPlayer Developer Guide表示它支持IE 7及更高版本。

那么问题是什么?

我为此尝试了html5 vidoe标签,但IE 8及以下版本也不支持。

<html>
    <head>


        <!--Stylesheets-->
        <link rel="stylesheet" href="css/styles.css"/>

        <!--jQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <!--jPlayer-->
        <script src="js/jquery.jplayer.min.js"></script>

         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>


    </head>
<body>
 <div style="margin-left:50px;" >
    <a href="https://www.google.com">
        <img src="back.jpg" width="64px" height="64px" alt=""/>    
    </a>
</div>
    <!--container for everything-->
    <div id="jp_container_1" class="jp-video jp-video-360p">

        <!--container in which our video will be played-->
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <!--main containers for our controls-->
        <div class="jp-gui">
            <div class="jp-interface">
                <div class="jp-controls-holder">

                    <!--play and pause buttons-->
                    <a href="javascript:;" class="jp-play" tabindex="1">play</a>
                    <a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
                    <span class="separator sep-1"></span>

                    <!--progress bar-->
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"><span></span></div>
                        </div>
                    </div>

                    <!--time notifications-->
                    <div class="jp-current-time"></div>
                    <span class="time-sep">/</span>
                    <div class="jp-duration"></div>
                    <span class="separator sep-2"></span>

                    <!--mute / unmute toggle-->
                    <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
                    <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>

                    <!--volume bar-->
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"><span class="handle"></span></div>
                    </div>
                    <span class="separator sep-2"></span>

                    <!--full screen toggle-->
                    <a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a>
                    <a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a>

                </div><!--end jp-controls-holder-->
            </div><!--end jp-interface-->
        </div><!--end jp-gui-->
        <div class="jp-no-solution">
            <span>Update Required</span>
            Here's a message which will appear if the video isn't supported. A Flash alternative can be used here if you fancy it.
        </div>

    </div><!--end jp_container_1-->

    <!--instantiate-->
    <script type="text/javascript">
    $(document).ready(function(){    
        $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    webmv: "Big_Buck_Bunny_Trailer.webm",
                    poster: "Big_Buck_Bunny_Trailer_480x270.png"

                });
            },
            swfPath: "js",
            supplied: "webmv",
            size: {
                width: "570px",
                height: "340px",
                cssClass: "jp-video-360p"
            }
        });  
    });
    </script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

Internet Explorer不支持WebM视频格式。 在这种情况下,JPlayer使用“Flash Fallback”方法,即它使用Flash Player为流提供不支持的视频格式。 因此,要在Internet Explorer中可视化WebM视频,需要安装Flash Player。