How can I get my video player to skip/seek to a certain time. I have had a go at this and it works when the page first loads (In Chrome) but not in any other browser. I also have a flash fallback which could be a pain, but for now the priority is the HTML side of things The major issue is that it doesn't work outside Chrome!
EDIT: This now works in IE9, Chrome and Firefox. However, not with the flash fallback!
Below is my attempt so far.
I'm using the following JS so far:
<script language="javascript">
$(function () {
var v = $("#video").get(0);
$('#play').click(function(){
v.play();
});
$('.s').click(function(){
alert("Clicked: "+$(this).html() +"- has time of -" + $(this).attr('s') );
v.currentTime = $(this).attr('s'); v.play();
});
});
</script>
Which links to the following:
<video id="video" controls width="500">
<!-- if Firefox -->
<source src="video.ogg" type="video/ogg" />
<!-- if Safari/Chrome-->
<source src="video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
<object type="application/x-shockwave-flash" data="player.swf"
width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
<p>Your browser can’t play HTML5 video.</p>
</object>
</video>
With the context of having buttons with a class s
and custom attribute s=60
for "60 seconds" etc.
One of the most exciting new features of HTML5 is the inclusion of the <video> element, which allows developers to include video directly in their pages without the need for any plugin-based solution.
HTML5 video works by allowing the person uploading the video to embed it directly into a web page. It works in a variety of internet browsers, including Internet Explorer 9+, Firefox, Opera, Chrome and Safari. Unfortunately, the technology is not compatible with Internet Explorer 8 and earlier versions.
As of 2020, HTML5 video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.
seekToTime:function( value )
{
var seekToTime = this.videoPlayer.currentTime + value;
if( seekToTime < 0 || seekToTime > this.videoPlayer.duration )
return;
this.videoPlayer.currentTime = seekToTime;
}
This is the seek function we are using. It's in MooTools syntax, but you'll get the point. Hope it helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With