0

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 类型的链接(但不确定!)。

这种情况有什么解决办法吗?请建议!

4

2 回答 2

0

尝试仅更改src属性:var videoEl = $("#mp4Source");videoEl.attr("src", videoSourceValue); videoEl.get(0).play();

于 2013-06-20T07:12:43.673 回答
0

找出原因,sharepoint 2010 存在一些文件处理限制。sharepoint 中央管理员和 iis 中的一些设置需要更改。

这里的链接详细提到了这些步骤。

而且我们不需要为此添加 .htaccess 文件。通过上面链接中提到的更改并使用有问题的方法#1 完成了这项工作。

于 2013-06-20T10:46:35.960 回答