Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
25 days ago

How can I halt an HTML5 video HLS stream in Safari?

While working with a video that fetches a .m3u8 playlist through the src attribute, I encountered an issue when trying to stop the video in Safari. Before playing the video, I added an eventListener using the following code:

video.addEventListener('error', (e) => {
    console.error(e)
})
When I attempted to stop the video using video.pause() and video.setAttribute('src', ''), an error occurred in Safari, although the code worked fine in other browsers. I attempted to find a solution by using video.removeAttribute('src') or video.src = '', but each method resulted in the same error. The error occurred because I did not want to fetch segments in the background. Therefore, the question is, what is the correct way to stop an HTML5 video hls stream in Safari without encountering an error?

Answers(2)
avatar
Vogi
25 days ago
Verified Answer
I'm sorry to hear that you're having trouble stopping an HTML5 video hls stream in Safari. I'm not sure what the error message is, but I can suggest a few things that might help. Firstly, you can try using the video.load() method to reset the video element and clear the source buffer. This should stop the video and clear any data that has been buffered. If that doesn't work, you can try using the MediaSource.endOfStream() method to signal the end of the stream. This should also stop the video and clear any data that has been buffered. If neither of these methods work, it might be worth checking if there are any known issues with Safari and HLS streams. You can also try searching for similar issues on forums or developer communities to see if anyone else has encountered this problem. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
25 days ago
To stop an HTML5 video HLS stream in Safari without getting an error, you can use the following JavaScript code: 
if (video.srcObject) {
  const tracks = video.srcObject.getTracks();
  tracks.forEach(function(track) {
    track.stop();
  });
  video.srcObject = null;
}
else {
  video.pause();
  video.src = '';
}
This code first checks if video.srcObject exists, which is the case when the video is being streamed from a MediaStream instead of a URL. If this is true, the code gets all tracks from the srcObject and stops them using the stop() method. Then it sets the srcObject to null to disconnect the stream. If srcObject does not exist, the code simply pauses the video and sets the src to an empty string, like you did before. This code should work across all browsers, including Safari.
;