net / stackoverflow 上有很多可用的答案,我已经尝试了所有答案,但没有一个能按我的意愿工作。
我的场景是这样的:
具有中继器控件的可视 Web 部件,其中包含视频列表和播放链接,单击时我想动态更改视频。
这是 ascx 页面代码:
<div id="divVideo">
<video id="videoPlayer" width="320" height="240" controls>
<source id="mp4Source" src="/_layouts/1033/Styles/PlayVideo/testVid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<ul>
<asp:Repeater runat="server" ID="rptrVideoCase" OnItemDataBound="rptrVideoCase_ItemDataBound">
<ItemTemplate>
<li><asp:Label runat="server" ID="lblTitle" Text='<%# Eval("Name") %>' /> <a class="playLink" style="float:right; cursor:pointer;">Play Video</a><asp:HiddenField
ID="hfVideoURL" runat="server" />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
在 JavaScript 中:
方法#1(添加视频标签而不重新加载页面)
$(document).ready(function () {
$(".playLink").on("click", function () {
var videoSource = $(this).next().val();
var htmlVideo = "<video width='320' height='240' src = '" + videoSource + "' type='video/mp4' controls>"
$("#divVideo").html("");
$("#divVideo").html(htmlVideo);
});
});
方法 #2(使用查询字符串参数进行页面刷新)
$(document).ready(function () {
var videoSourcefrmQryString = getUrlVars()["videoSource"];
$(".playLink").on("click", function () {
window.location.href = window.location + "?videoSource=" + videoSource;
});
if (videoSourcefrmQryString.length > 0) {
var htmlVideo = "<video width='320' height='240' src = '" + videoSourcefrmQryString + "' type='video/mp4' controls>"
$("#divVideo").html("");
$("#divVideo").html(htmlVideo);
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
});
这两种方法在 FF 和 chrome 中都可以正常工作,但在 IE 9 中,当页面第一次加载视频时(在添加具有 mime 类型的 .htaccess 文件后,这在以前也不起作用)但是在单击链接时播放器在中心显示一个红叉,这与没有 .htaccess 文件时的情况类似。通过在 IE Developer 工具中使用网络捕获,我可以在第一次加载时看到视频的内容类型为“video/mp4”,但在单击播放链接时,内容类型会发生变化。快速猜测是单击未加载 mime 类型的链接(但不确定!)。
这种情况有什么解决办法吗?请建议!