我正在尝试使用 jPlayer 从 url 嵌入视频文件。
这是我正在使用的代码。这在 chrome 和 Firefox 中完全可以正常工作,但在 Internet Explorer 7,8 或 9 中却不行。显示视频框,并在视频框下方显示一条错误消息。
jPlayer 开发者指南说它支持 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>