0

.webm ビデオ ファイルをストリーミングするシンプルなビデオ プレーヤーと、その下にすべてのファイルと [選択] ボタンを保持する Gridview があります。

私のaspxページにはvidSwap(vidURL)、ストリーミングビデオのソースを変更することになっているjavascript関数があります。通常のテーブルを使用する場合、すべて HTML で完全に機能しますが、これらのグリッドビュー テーブルは依然として混乱を招きます。

ページをリロードせずにプレーヤーでビデオ スワップを実行するために、グリッドビューの選択ボタンを配線する賢い方法はありますか?

私の XML ファイル (データ):

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <video name="2.webm" location="http://10.0.8.168/media/" />
  <video name="redcliff450.webm" location="http://10.0.8.168/media/" />
  <video name="sunflower.webm" location="http://10.0.8.168/media/" />
  <video name="Elephants_Dream.webm" location="http://10.0.8.168/media/" />
</root>

私の ASP ファイル:

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="VideoStreaming.index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Streaming Video</title>
    <script type="text/javascript">
        function vidSwap(vidURL) {
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = vidURL;
            myVideo.load();
            myVideo.play();
        }
    </script>

    <script src="/build/jquery.js" type="text/javascript"></script> 
    <script src="/build/mediaelement-and-player.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/build/mediaelementplayer.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:100%;">
            <tr>
                <td>
                    <video width="640" height="360" id="Video1" src="http://10.0.8.168/media/2.webm" 
                    controls="controls" preload="none">
                    </video>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/data.xml" />
                    <asp:GridView ID="GridView1" runat="server" DataSourceID="XmlDataSource1" 
                        AutoGenerateColumns="False" AllowPaging="True" CellPadding="4" 
                        ForeColor="#333333" GridLines="None" 
                        onselectedindexchanged="GridView1_SelectedIndexChanged">
                        <AlternatingRowStyle BackColor="White" />
                        <Columns>
                            <asp:CommandField SelectText="Play" ShowSelectButton="True" />
                            <asp:BoundField DataField="name" HeaderText="name" 
                                SortExpression="name" />
                        </Columns>
                        <EditRowStyle BackColor="#2461BF" />
                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                        <RowStyle BackColor="#EFF3FB" />
                        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#F5F7FB" />
                        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                        <SortedDescendingCellStyle BackColor="#E9EBEF" />
                        <SortedDescendingHeaderStyle BackColor="#4870BE" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
4

3 に答える 3

1

それでも JavaScript 関数を使用したい場合は、これを試すことができます

<Columns>
  <asp:TemplateField>
    <ItemTemplate>
       <a href="#" onclick='vidSwap("<%# Eval("videoURL") %>")'>Play</a>
    </ItemTemplate>
  </asp:TemplateField>
....
</Columns>

videoURLこれは、データソースに関連するものがあることを前提としています。XML からビデオ URL を提供している任意の変数名/プロパティに変更できます。

于 2012-07-11T15:16:26.833 に答える
0

あなたの質問にコメントする方法がわからなかったので、これが私がこれを理解できる唯一の方法です...あなたはiFrameに精通していますか？コードからビデオを削除してiframeに置き換えた場合、スワップを変更してiFrameをロードするよりも、ページがリロードされません。

iFrame上のw3Schools

于 2012-07-11T15:07:39.833 に答える
0

これは、jQuery を使用して非常に簡単に行うことができます。何かのようなもの：

$('a.select-button-class').click(function() {
vidSwap($(this).attr('href'));
return false;
});
于 2012-07-11T14:47:40.047 に答える