Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to jump to a location of video using html 5

Tags:

html5-video

I want to use html5 video tag to play my video. How can I set the time from which the video starts playing.

for example my video is 90 seconds long i want to start playing at 30 seconds

  <video width="320" height="240" controls>
  <source src="<?php echo base_url() ?>/programs/prg1.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>

please help me

like image 911
Chinthu Avatar asked Dec 16 '13 09:12

Chinthu


2 Answers

From http://blog.grio.com/2012/08/how-to-seek-an-html5-video-at-a-specific-time-on-load.html

How To Seek an HTML5 Video at A Specific Time On Loadby Peter Tubig

HTML:

<video id="video1" width="320" height="240">
     <source src="movie.mp4" type="video/mp4" />
</video>

Javascript:

document.getElementById("video1").currentTime = 10;

The Javascript statement sets the video1 video’s current time to the 10-second mark. However, this will only work if the browser has already loaded the video’s metadata. The metadata contains pertinent video information such as dimensions and duration. Knowing the video’s duration is required for the browser to seek the video. If it doesn’t have that, then current time will not be set (remains 0). A scenario where this could happen is when a webpage wants to play a video at a specific time when the page loads.

like image 81
gaurav5430 Avatar answered Nov 14 '22 06:11

gaurav5430


Html :

<video width="400" controls id="VideoId">
  <source src="Intro.mp4" type="video/mp4"> 
</video>`

JavaScript:

var video = document.getElementsByTagName("video")[0];
video.currentTime = 40.066667;  

you can also use get elementbyid

like image 38
Monika Kamble Avatar answered Nov 14 '22 06:11

Monika Kamble