Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Html5 video intro and show site

Posted on 2014-03-24
5
1,109 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

829 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