Question

I would like to setup the maximum playback duration of a html5 video player on my website.

There is a JUST preview zone on my website, and It would be very useful to me to load tha same full video as in the member area, which is about 10 minutes long, but in the preview zone I want to playback just the first 15 seconds from this video.

I have tried using duration = "15" but no use, an I havent got a clue

I am using the following code

        <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
            controls preload="auto" width="300" height="170" duration="10"
             poster="<?=$url_base?>fda/videofiles/vidprev2.png"
             data-setup='{"example_option":true}'>
             <source src="<?=$url_base?>fda/videos/clip1.mp4" type='video/mp4' />
             <source src="<?=$url_base?>fda/videos/clip1.webm" type='video/webm' />
             <source src="<?=$url_base?>fda/videos/clip1.ogv" type='video/ogg' />
        </video>

the video player works fine, but it plays the entire clip instead of just the beginning

Was it helpful?

Solution

You can use Media Fragments

Adding a media fragment to the media URL, you can specify the exact portion you want to play. To add a media fragment, you simply add #t=[start_time][,end_time] to the media URL. For example, to play the video between seconds 10 through 20, you could specify:

    <source src="devstories.webm#t=10,20" 
        type='video/webm;codecs="vp8, vorbis"' />

You can also specify the times in hours:minutes:seconds, such as #t=00:01:05 to start the video at one minute, five seconds in. Or, to only play the first minute of the video, you would specify #t=,00:01:00.

You need to make sure Range Requests are supported by your server: check for Accept Ranges: bytes. It's on by default for Apache and many other servers, but worth checking.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top