How to make html5 Video not reload when Button is clicked in UpdatePanel asp.net

I have a repeater that displays video lists and a like button. I leave it inside the UpdatePanel. However, when I click the "Like" button, it seems that my video reloads from the beginning, the feeling that the video flashes up looks very annoying.

How do I not have to reload the video when button Like event?

Here is the code I use:

<asp:UpdatePanel ID="up__" runat="server">
	<ContentTemplate>
		<asp:Repeater ID="rpt_one" runat="server" ClientIDMode="Static" OnItemCommand="rpt_one_ItemCommand">
			<ItemTemplate>
				<video ID="datavideo" autoplay playsinline muted loop="true" controls class="overflow-hidden" disablepictureinpicture controlslist="nodownload noplaybackrate ">
					<source type="video/mp4" src='<%# Eval("Video") %>'/>
				</video>
				<asp:Button ID="bt_like" ClientIDMode="Static" CommandArgument='<%# Eval("ID") %>' CommandName="like" runat="server" Text="" />
			</ItemTemplate>
		</asp:Repeater>  
	</ContentTemplate>
</asp:UpdatePanel>

Looking forward to everyone's help. Thank you!

The issue you're experiencing is due to the nature of how the UpdatePanel in ASP.NET works. By default, when a postback occurs within the UpdatePanel, the entire content inside the UpdatePanel gets re-rendered, including the video element, which causes it to reload.

To prevent the video from reloading when the "Like" button is clicked, you can use JavaScript and handle the button click event separately without relying on the UpdatePanel.

Here's an updated version of your code that uses JavaScript and jQuery to achieve the desired behavior:

<asp:Repeater ID="rpt_one" runat="server" ClientIDMode="Static" OnItemCommand="rpt_one_ItemCommand">
    <ItemTemplate>
        <video autoplay playsinline muted loop="true" controls class="overflow-hidden" disablepictureinpicture controlslist="nodownload noplaybackrate ">
            <source type="video/mp4" src='<%# Eval("Video") %>'/>
        </video>
        <asp:Button ID="bt_like" ClientIDMode="Static" CommandArgument='<%# Eval("ID") %>' CommandName="like" runat="server" Text="" 
            OnClientClick='<%# "handleLikeClick(" + Eval("ID") + "); return false;" %>' />
    </ItemTemplate>
</asp:Repeater>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
   function handleLikeClick(videoId) {

        // Set the CommandArgument of the button to the videoId
        button.setAttribute("data-command-argument", videoId);

        // Make an AJAX call to trigger the server-side event
        $.ajax({
            type: "POST",
            url: "YourPage.aspx/LikeButtonClicked",
            data: JSON.stringify({ videoId: videoId }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                // Handle the response from the server, if needed
            },
            error: function(error) {
                // Handle any errors that occur during the AJAX call
            }
        });
        
        // Prevent postback
        return false;
    }
</script>

using System.Web.Services;

public partial class YourPage : System.Web.UI.Page
{
    [WebMethod]
    public static void LikeButtonClicked(string videoId)
    {
        // Access the videoId parameter passed from the client-side
        // using the CommandArgument property of the button
        var button = HttpContext.Current.Request.Params["__EVENTTARGET"];
        var videoId = ((Button)button).CommandArgument;
        
        // Example: Update the database to increment the like count
        UpdateLikeCount(videoId);
    }
    
    private static void UpdateLikeCount(string videoId)
    {
        // Update the like count for the given videoId in the database
    }
}

Hope it's work !