c#asp.net如何使用bootstrap模式将视频源文件名添加到不同的媒体类型中

c# asp.net how to add video source filename to different media type with bootstrap modal

本文关键字：添加 类型 媒体 文件名 源文件 何使用 net bootstrap 模式 视频 c#asp      更新时间：2023-09-26

我想使用javascript更新一个全局C#变量。我想我做不到，因为javascript是客户端。我可以通过javascript传递视频的源文件名，但我如何更新模态中的视频源标记？如有任何帮助，我们将不胜感激。

这是我的代码：

观看视频.aspx

<div class="table-responsive has-margin-bottom">
    <asp:DataList ID="DataList2" runat="server" RepeatLayout="Table" RepeatDirection="Horizontal" RepeatColumns="3" 
        Width="100%" OnItemDataBound="DataList2_ItemDataBound">
        <ItemTemplate>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" 
                data-videoname='<%# Eval("title") %>' data-videofile='<%= fileDirectory %><%# Eval("filename") %>' >
                <img src='<%= fileDirectory %><%# Eval("filename") %>.png' class="img-responsive" />
                <h3><%# Eval("title") %></h3>
            </button>
        </ItemTemplate>
    </asp:DataList>
</div>    

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" ></h4>
            </div>
            <div class="modal-body">
                <video id="video1" class="center-block" autoplay="autoplay" controls="controls" width="640" height="480"  >
                    <source src="<%=videoFile %>.mp4" type="video/mp4" />
                    <source src="<%=videoFile %>.ogv" type="video/ogv" />
                    <source src="<%=videoFile %>.wmv" type="video/wmv" />
                    Video is not supported by your browser or computer
                </video>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

母版页

$('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) 
        var myFilename = button.data('videofile') //videofilename for source
        var myTitlename = button.data('videoname')
        var modal = $(this)
        modal.find('.modal-title').text(myTitlename)
    })

这将在单击时将视频src更新为每个按钮的数据视频文件属性中的内容：

<button onclick="$('#video1 source').attr('src', $(this).data('videofile'));" class=...
相关文章：