连接Select按钮以执行Javascript和HTML

Wiring the Select button to perform Javascript and HTML

本文关键字：Javascript HTML 执行 Select 按钮 连接      更新时间：2023-09-26

我有一个简单的视频播放器，可以流式传输.webm视频文件，下面有一个Gridview，可以保存我的所有文件和Select按钮。

在我的aspx页面中，我有一个javascript函数vidSwap(vidURL)，它应该更改流媒体视频的来源。当我使用普通表时，它完全可以在HTML中工作，但这些网格视图表仍然让我感到困惑

有没有一种巧妙的方法可以在不重新加载页面的情况下连接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>

如果你仍然想使用你的JavaScript函数，你可以试试这个

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

这是假设您的数据源中存在videoURL或其他相关内容。您可以将其更改为提供XML 视频URL的任何变量名称/属性

使用一些jQuery可以很容易地做到这一点。类似于：

$('a.select-button-class').click(function() {
vidSwap($(this).attr('href'));
return false;
});

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

w3iFrame 上的学校

相关文章：