HTML5视频：将JavaScript变量传递至HTML链接的技术实现问询

Looks like you're trying to dynamically update an HTML link with the video's current playback time using the timeupdate event—let's get this working properly. I've dealt with similar media event handling before, so here's a step-by-step solution:

Working Code Example #

First, here's a complete, runnable snippet that fixes the currentTime access issue and updates your link whenever the video time changes:

<!DOCTYPE html>
<html>
<head>
    <title>Video Time Link Updater</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <video id="myVideo" controls width="500">
        <source src="your-video.mp4" type="video/mp4">
        Your browser doesn't support HTML5 video.
    </video>

    <!-- This link will be updated dynamically -->
    <a id="timeReferenceLink" href="#" style="margin-left:10px;">Current Time: 0.00s</a>
    <div id="output"></div>

    <script>
        const media = document.getElementById('myVideo');
        const timeLink = document.getElementById('timeReferenceLink');

        // Handle time updates and link modification
        function updateTimeAndLink() {
            // Get current time, rounded to 2 decimal places for clarity
            const currentTime = media.currentTime.toFixed(2);
            
            // Update your output div as before
            $('#output').text(`Current Playback Time: ${currentTime}s`);
            
            // Option 1: Update the link's visible text with current time
            timeLink.textContent = `Share Link for ${currentTime}s`;
            
            // Option 2: Add current time to the link's URL (e.g., for deep linking)
            timeLink.href = `https://your-site.com/video?time=${currentTime}`;
            
            // If you just want a hash fragment:
            // timeLink.href = `#t=${currentTime}`;
        }

        // Attach listeners
        // Fire on timeupdate (repeats during playback)
        media.addEventListener('timeupdate', updateTimeAndLink);
        // Fire once metadata loads to set initial state
        media.addEventListener('loadedmetadata', updateTimeAndLink);
    </script>
</body>
</html>

Key Fixes & Explanations: #

• Guarantee Valid currentTime: The loadedmetadata event ensures we don't try to access currentTime before the video has loaded its basic info (which was likely causing your earlier currentTime issues).
• Continuous Updates: The timeupdate event fires frequently as the video plays, so our link will always show the latest time.
• Link Modification: We target the link by ID (timeReferenceLink) and update both its text content and URL—pick whichever fits your use case, or use both.
• Readable Time: Using toFixed(2) cleans up the raw currentTime value (which can be a long decimal) to something user-friendly.

Troubleshooting Common Issues: #

• If currentTime is still 0 or NaN: Double-check that your video element has the correct ID (myVideo) and that the video source is valid (the browser needs to load metadata for currentTime to be available).
• Link not updating? Make sure you're selecting the link element correctly—avoid using document.createElement every time (that creates a new link each time, instead of updating an existing one like in the example above).

This should fully solve your problem of passing the JavaScript currentTime variable to your HTML link dynamically.

内容的提问来源于stack exchange，提问作者user9442969