Question

net / stackoverflow上有很多答案，我已经尝试了所有这些答案，但没有一个能按我的意愿工作。

我的场景是这样的：

具有转发器控件的可视化webpart，其中包含一个视频列表，带有播放链接，点击后我想动态更改视频。

这里是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中，当页面第一次加载时播放视频（在添加.htaccess文件并使用mime类型后，这也无法正常工作）但是点击链接后，播放器会在中心显示一个红叉，这与没有.htaccess文件的情况相似。通过在IE Developer工具中使用网络捕获，我可以在首次加载时看到视频的内容类型为“video / mp4”，但在点击播放链接后，内容类型会发生变化。快速猜测是在点击链接时没有加载mime类型（不确定！）。

这种情况有什么解决方案吗？请建议！

Answer 1

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

Answer 2

找出原因，在sharepoint 2010中有一些文件处理限制。需要在sharepoint central admin和iis中更改一些设置。

Thee link here详细介绍了这些步骤。

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

动态视频标签更改在ie9中不起作用

2 个答案: