0

我有一个简单的视频播放器，可以流式传输 .webm 视频文件，下面有一个 Gridview，它包含我的所有文件和选择按钮。

在我的 aspx 页面中，我有一个 javascript 函数vidSwap(vidURL)，它应该更改流视频的来源。当我使用普通表格时，它在 HTML 中完美运行，但这些 gridview 表格仍然让我感到困惑。

是否有一种巧妙的方法可以连接 gridview 中的选择按钮以在播放器上执行视频交换而不重新加载页面？

我的 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

你可以用一些 jQuery 很容易地做到这一点。就像是：

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

我不知道如何评论你的问题，所以这是我能解决这个问题的唯一方法......你熟悉 iFrame 吗？如果您从代码中删除了视频并将其替换为 iframe，而不是更改交换以加载 iFrame，则不会重新加载页面。

iFrame 上的 w3Schools

于 2012-07-11T15:07:39.833 回答