To embed videos in a web page and jump to a specified time point, there are three main methods: use the URL hash parameter to match JavaScript, use the HTML5 Media Fragment standard, and use the URL query parameters to control the playback position. First, it is widely compatible to use hash in the URL such as #t=30 and extract the timestamp with JavaScript to set currentTime; secondly, HTML5 supports the media fragment syntax of #t=10,20 to directly specify the playback interval in the video source, but the browser compatibility is different; finally, you can also use query parameters such as ?t=60 and set the playback time after parsing the parameters on the target page. This method is more flexible and convenient for statistical tracking. It is necessary to pay attention to details such as automatic playback restrictions, server configuration, cache issues and cross-platform compatibility. It is recommended to conduct multi-platform testing to ensure consistency.

Sometimes you want to embed a video on the web page and hope that the link can jump to a specific point in the video, such as sharing a wonderful clip. HTML5 videos do not directly support timestamp parameters, but you can implement this function through JavaScript or browser behavior.

Use the hash parameter of the URL to control the playback time

A common practice is to use # in the URL to add time parameters, for example:

 https://example.com/video.html#t=30

Then use JavaScript to check the hash value in the page, extract the time and set the video playback position.

 window.addEventListener('load', function() {
  const video = document.getElementById('myVideo');
  const timeMatch = window.location.hash.match(/t=(\d )/);
  if (timeMatch && video) {
    const seconds = parseInt(timeMatch[1], 10);
    video.currentTime = seconds;
    video.play();
  }
});

In this way, after the user clicks on a link with a timestamp, the video will automatically jump to the specified number of seconds to start playing.

Media fragment standard using HTML5 Video (some browsers support)

There are many modern browsers that support Media Fragments standards. You can add #t=開始時(shí)間,結(jié)束時(shí)間to specify the playback interval after the video link:

 <video src="movie.mp4#t=10,20" controls></video>

The above example will cause the video to start playing from the 10th second and end at the 20th second. Notice:

• Not all browsers support this method
• If you only specify the start time, you can write it as #t=30
• Video compatibility may be different in different formats

Add timestamp jump to anchor link

If you want to jump from another page or a link within a page to a specific video time, you can also add time parameters to the normal link and control the playback position with JavaScript:

 <a href="video-page.html?t=60">Skip to 60th second</a>

The t parameter in the target page parsing URL:

 function getParameterByName(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

const time = getParameterByName('t');
if (time) {
  const video = document.getElementById('myVideo');
  video.currentTime = parseInt(time, 10);
  video.play();
}

This method is more general and is convenient for statistics, tracking and other operations.

Notes and FAQs

• Browser compatibility : The media fragment method is not supported by all browsers, especially Safari on mobile.
• Autoplay Limits : Some browsers prevent automatically playing videos, especially with sound. You can consider mute automatic playback or guide users to click playback.
• Server Configuration Impact : Some servers do not properly configure the MIME type or Accept-Ranges support, which will cause timestamp jump to fail.
• Caching issues : Videos with hash or search parameters may be cached as different resources, so you need to pay attention to cleaning the test cache.

Basically these are the methods. It is not complicated to implement, but it is easy to get stuck in details, especially in terms of cross-platform compatibility. It is recommended to do a few more rounds of tests to ensure the consistent experience.

The above is the detailed content of How to link to a specific time in an HTML5 video?. For more information, please follow other related articles on the PHP Chinese website!