0

ネット/スタックオーバーフローには多くの回答があります。私はそれらすべてを試しましたが、どれも私が望んでいたように機能しませんでした。

私のシナリオは次のようなものです：

ビデオを動的に変更したいクリックすると、再生リンクを含むビデオのリストを含むリピーターコントロールを持つビジュアル 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 開発者ツールでネットワーク キャプチャを使用すると、最初の読み込み時にビデオのコンテンツ タイプが「video/mp4」になっていることがわかりますが、再生リンクをクリックするとコンテンツ タイプが変わります。MIME タイプがロードされていないリンクをクリックすると、簡単に推測できます (確かではありません!)。

このシナリオに対する解決策はありますか? 提案してください！

4

2 に答える 2