Solved

Html5 video intro and show site

Posted on 2014-03-24
5
1,031 Views
Last Modified: 2014-05-24
how do you put an html5 video has an intro nd then show the site (same as flash intro) ? You do a simple JS redirect ? or  there is other tricks ?
And how to do make the animation start automaticaly without the controls buttons (back & fortword...).
0
Comment
Question by:ymazal_ca
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39950168
You would use javascript and detect when the movie is done.  

You can use videojs http://www.videojs.com/  and there is an api for the video being complete https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#ended-event

However, "flash" intro's are rare for a reason.  Viewers really don't want to sit through an intro.  Just take them to your home page and offer your video there.  I know site owners keep wanting to add these things, but site viewers don't want to wait.
0
 

Author Comment

by:ymazal_ca
ID: 39950218
Can't you put some how a "skip inro" on the video thrue JavaScript ? This way you could skip the intr if you don't feel like seeing it...

The problem it an html5 movie, not flash...
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39950264
You can play a video intro just as you would flash.  Videojs is just one player and if you go to docs > player api doc https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md you can see all the events you can have access to.  

One of those events is the ended event.  They have sample code but you can add whatever you want.  
vjs.Player.prototype.onEnded = function(){
  if (this.options_['loop']) {
    this.currentTime(0);
    this.play();
  }
};

Open in new window


What you might try is adding a modal to the  home page and when the page loads, show the modal which will contain the video.  All they have to do is click outside the modal to get to the home page and you can have an ended event that closes the modal.  I would add a cookie that they have already visited the home page and not show the intro again to the same person though.    

If you think it is of interest to see a 2nd or 3rd time, you can have a link that will display the modal/video.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now