HTML5 video - playing only a portion of a video

Question

Is there some straightforward technique to play only a certain part of a HTML5 video? For example in a 30 second clip I would like to play only the part 5-20 sec. Additionally the rest of the video should not be accessible from the UI at all (meaning the video timeline should only show the 5-20 sec part).

I've been going through some HTML5 video players but none of them seem to be supporting this kind of functionality. If anyone knows a (good) way to implement this feature please give me a hint.

Thanks in advance!

I did some experiments using the VideoJS player (http://videojs.com/) and I managed to get it working at least on desktops, android devices and iPads. — calle, May 25 '12 at 12:33
Basically I had to override some of the functionality of the original player to render the controls correctly and play around with the videos 'timeupdate' event to limit the video's playtime. I must agree with @Riplikash that currently the only decent way to accomplish the partial play behaviour is to serve the playable content from the server and not try to restrict it from the client side. — calle, May 25 '12 at 12:43

score 7 · Accepted Answer · edited Mar 20 '19 at 16:22

7

Even though this question has already been marked as answered, here's something that may interest you and anyone else who stumbles across here: Specifying playback range.

It's part of the Media Fragment API and currently works in the latest versions of Firefox, Chrome and Safari 6+.

edited Mar 20 '19 at 16:22

nachocab

13,328
21
91
149

answered Apr 10 '13 at 13:25

Ian Devlin

18,534
6
55
73

This answer is useful than the one marked correct. Thanks @Ian Devlin – gkd Jul 21 '14 at 09:19
3

That link is no longer valid, there is no information there regarding specifying playback range. – prendio2 Oct 06 '17 at 10:26
@prendio2 I just fixed the link – nachocab Mar 20 '19 at 16:32
1

Does it make the rest of the video unavailable? For me it only plays a video within time range by default, but I still can seek to other parts – Oleh Rybalchenko Jun 19 '19 at 19:58
1

I believe this is relevant: https://stackoverflow.com/questions/26665280/html5-video-element-start-and-end-times – busterroni May 05 '20 at 21:12

score 0 · Answer 2 · answered Apr 16 '12 at 13:04

0

You can implement it there is a Player.Play() event in a players, whenever Play() called start a timer and call the Player.stop() on the specific time you want.

answered Apr 16 '12 at 13:04

Zaheer Ahmed

28,160
11
74
110

score 0 · Answer 3 · answered Apr 16 '12 at 13:05

0

I got the same problem and I didn't found something that can solves this problem, what you can do is to implement your own controls and display the video with a canvas...

and if you are trying to implement this in IOS you will not be able to do it.

answered Apr 16 '12 at 13:05

Calleth 'Zion'

613
3
15

With javascript you could be able to play the partial time you want but the UI is gonna show the real time, you can hide the original controls but the user could be able to show them by "right click"-->"show controls" the closest way I found was to use a player that can shows a partial time it was JWPlayer, it can show a "fake" duration but the start time is always 0 even when you can start at other point... – Calleth 'Zion' Apr 16 '12 at 13:42

score 0 · Answer 4 · answered Apr 16 '12 at 13:06

My thought would be to use custom controls, as I don't believe that functionality is available natively. All the functionality of html5 controls (play, pause, start at timestamp, etc.) can be called via javascript. In this case you are going to want to edit the currentTime variable.

So you may want to consider setting up your own slider, where the start of the slider represents your starting point, and the end your ending point. Set the video to not play on page load. Then on page load have a javascript function change the currentTime to your starting point. For stopping you could occasionally query the currentTime. I wouldn't use a timer as delays like slow loading could throw it off.

You're not going to be able to totally limit users from seeing other parts of the video via HTML5 video. It's kind of like the tag. It is very open. You would have to limit which parts of the video will be served on the server end. — Riplikash, Apr 16 '12 at 15:39

score 0 · Answer 5 · answered Apr 10 '13 at 11:15

I am trying to implement a similar video in "Preview Mode". I am utilizing the methods stated above by adding an event listener and then pausing the video at a currentTime()=='x' postition. To prevent user from simply hitting play again, the currentTime listener wont allow playback past the 'x' time in the timeline so each time the user hits play, it is automatically instantly paused again. Furthermore, at time 'x' the video container will become hidden through CSS thus preventing interaction from the user with the video.

HTML5 video - playing only a portion of a video

5 Answers5