Solved

HTML 5 Video

Posted on 2013-01-27
8
244 Views
Last Modified: 2013-02-04
I want to play 2 or more videos in succession on an HTML 5 page. When the first one ends, I want to start the 2nd one within 1 or 2 seconds. Etc.

Basically, I want to take the attached HTML and make it play several.

Note for those of you who might have looked at my other questions on this subject with the 344MB video, we are going to break that into pieces.

Can someone point me to code that will do this? I'm familiar with javascript timers, etc.

Thanks
play-video.htm
0
Comment
Question by:Richard Korts
8 Comments
 
LVL 11

Expert Comment

by:mcnute
ID: 38825986
Hello dear Author,

with video js, an html5 framework for consistent html5 video playback in all browsers you have the possibility to add event listeners to your video.

For example, when your video has been watched to the fullest, it will trigger a function which pulls in the next video.

Reference to the api of video js on github which is very well explained and easy to learn.

In your case the api call would be like this:
var myFunc = function(){
  var myPlayer = this;
  // Here you pull in the next video either with jquery dom insertion or by changing the src attribute of the html5 video tag.
};
myPlayer.addEvent("ended", myFunc);

Open in new window


I've made wonderful experience with the framework. It is developed by a company, zencoder, which delivers the best video experience to millions of people today. So it is a reliable framework.

Best regards,
mcnute
0
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 38826359
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38826539
why not using a plugin?
http://www.jplayer.org/latest/demos/

It support playlist, you can customize the template (or don't have any) and more...
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38826876
Hi,

Take a look at the available HTML5 Video players and compared here - http://html5video.org/wiki/HTML5_Video_Player_Comparison

Choose the best one you like!

My preference is Video.js - http://videojs.com/

This looks interesting as well - http://www.html5videoplayer.net/

Hope it helps u...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Richard Korts
ID: 38827339
To all,

I've tried to use videojs.com and play ONE video ONCE no controls, autoplay.

It DOESN'T work!!

It loads the page & does NOTHING. I can't find ANY documentation that tells what properties / methods there are. I need the ability for the user to pause / play. The method pause is not supported. etc. The docs page is VERY limited.

Don't know why everybody is so hot on that.

I need something that WORKS!!!

<!doctype html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" />

<title>Play Video</title>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script language="JavaScript" type="text/javascript">
      var myVideo = document.getElementById("video1");
      ac = "";
      function do_init() {
            document.getElementById("scode").disabled=true;
            document.getElementById("subgo").disabled=true;
            window.setTimeout("see_if_done()", 1000);
      }      
      function see_if_done() {
            var myVideo = document.getElementById("video1");
                  if (myVideo.ended) {
                        code = "WATER";
                        document.getElementById("scode").disabled=false;
                        document.getElementById("subgo").disabled=false;
                        alert("Enter your code of " + code + " now and click Go.");
                        
                  } else {
                        window.setTimeout("see_if_done()", 1000);
                  }
            return true;
      }
      function chk_vals() {
            if (ac != "p") {
                  if (document.fr.scode.value == "") {
                        alert("Please enter your code.");
                        return false;
                  }
                  return true;            
            } else {
                  return false;
            }      
      }
function vid_play_pause() {
      var myVideo = document.getElementById("video1");
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
  return true;
}      
</script>                  
</head>
<body style="font-family: Arial, Helvetica; font-size: 12pt;" onLoad="do_init();">
      <table width="800" cellpadding="4">
            <tr>      
                  <td><img src="images/spacer.gif" width="100" height="5">
                  <td><img src="images/logo.jpg"></td>
                  <td><img src="images/header.jpg"></td>
            </tr>
      </table><br>
<form method="POST" name="fr" action="thank_you.php" onSubmit="return chk_vals();">
<div style="text-align:center">
  <br>
<video id="video1" class="video-js vjs-default-skin" autoplay
  preload="auto" width="800" height="600"
  data-setup="{}">
      <source src="Aquascape Webinar.mp4" type="video/mp4">
    <source src="Aquascape Webinar.ogg" type="video/ogg"></video>
  <br> <button onclick="ac='p'; vid_play_pause();">Play/Pause</button>
  <br>
  Enter Your Code<br>
  <input type="text" name="scode" size="20" id="scode"><br><br>
  <input type="submit" value="Validate Attendance" id="subgo" onMousedown="ac='';">
</div>
</form>

</body>
</html>
0
 
LVL 23

Expert Comment

by:Roopesh Reddy
ID: 38827732
Hi,

Check this link - http://www.marceloduende.com/blog/?p=28

This article explains clearly what you wish - Playing multiple files!

Hope it helps u...
0
 

Author Comment

by:Richard Korts
ID: 38827812
roopeshreddy

I looked at that & I have NO CLUE.

Looks like TOTAL nonsense to me, I have NO IDEA how to apply that.
0
 
LVL 23

Accepted Solution

by:
Roopesh Reddy earned 500 total points
ID: 38850347
Hi,

Oops!

So, i got this link for you - http://www.mindfiresolutions.com/How-to-play-multiple-videos-in-a-loop-using-HTML5-and-JavaScript-1799.php

Well explained for playing multiple files with HTML 5 Video tag!

Hope it helps u...
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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 …

895 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

15 Experts available now in Live!

Get 1:1 Help Now