Solved

HTML 5 video player

Posted on 2013-01-25
17
605 Views
Last Modified: 2013-01-30
We have a 334 MB video that we are trying to play in html (attached).

It freezes part way through.

I suspect it has to do with caching, etc.

Can we do something to PREVENT the freezing? Can we somehow buffer it so the video doesn't try to get ahead of what was downloaded?

Thanks
play-video.htm
0
Comment
Question by:Richard Korts
[X]
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
  • 8
  • 8
17 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 150 total points
ID: 38822396
Short answer is no.  If the connection is too slow; or the isp is throttling; or the shared network pipe is overloaded, or the user has too much other stuff running their system, then the video will run out of stuff and have to wait for more to download to the buffers.

Anything that big is going to have problems even on a fast connection, and the isp will slowdown delivery if it negatively impacts other users on the shared resources.

When you are using a video tag you should have a proper html5 doctype.  if you replace the html tag with:
<!doctype html>
<html  lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" />

It might help a little.

Cd&
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38823020
You can also try to use a different JavaScript API for video...the most popular (and free) HTML5 video API right now is: http://videojs.com/

Check it out! It gives you a lot more features for your HTML5 video that you'll need to get what you want done...plus the setup is as easy as possible.
0
 

Author Comment

by:Richard Korts
ID: 38823247
To Element1910

That's a nice idea but I go to that site & there is NO CLUE how to download or use anything.

It's completely confusing.

I need something simple & intuitive

Thanks.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Element1910
ID: 38823521
Oh...just click "setup" at the top and it will drop you down into the section for installation onto your page. There is no need to download anything...cause everything is hosted for you online already. Here's a quick rundown on the setup:

Simply reference/link their Javascript and CSS files (like you would any CSS or referenced JS) by putting this into the header:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

Open in new window

Then simply call your HTML5 video in this source below:
<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="264" poster="my_video_poster.png"
  data-setup="{}">
  <source src="my_video.mp4" type='video/mp4'>
  <source src="my_video.webm" type='video/webm'>
</video>

Open in new window


It's that simple. VideoJS takes care of the rest and there is no need to update anything at all :)
0
 

Author Comment

by:Richard Korts
ID: 38828454
To  element1910.

It doesn't work. Here's the code:

<!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 = "POND";
                        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="640" height="264"
  data-setup="{}">
  <source src="SAM_037.MP4" type='video/mp4'>
  <source src="SAM_037.ogv" type='video/ogv'>
</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
 

Author Comment

by:Richard Korts
ID: 38833150
To Element1910.

Coming back to this one.

I now have a version of this that at least starts in IE, FireFox & Chrome. It uses videojs.

You can see it at http://aquascapegetyourfeetwet.com/play_vid_onlyjs.htm. Try it in IE and Chrome. It seems to work OK in FiteFox; there are a few cosmetic issues & I NEED to disallow "show Controls"

Any ideas?

Thanks
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38833349
Works for me in IE8 :) I don't have Chrome on my work computer, but when I get home I can test it out as well. Was the videoJS helpful to you?

So you want to remove the [Right-click]->[Show Controls] option from the video? Let me know if that is correct.
0
 
LVL 7

Assisted Solution

by:Element1910
Element1910 earned 350 total points
ID: 38833366
Added a javascript event handler to disable the context-menu for you

	myVideo.addEventListener('contextmenu', function(e){
		e.preventDefault();
		return false;

Open in new window

Here's the complete source for your page:
<!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 = "";

	myVideo.addEventListener('contextmenu', function(e){
		e.preventDefault();
		return false;
	});

	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 = "THE CODE";
				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="500"
  data-setup="{}">
    <source src="Aquascape Webinar.mp4" type="video/mp4">
    <source src="Aquascape_Webinar.ogv" type="video/ogv">
	<source src="Aquascape_Webinar.webm" type="video/webm">
    Your browser does not support HTML5 video.
  </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>

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 38833425
To Element1910,

You say it works in IE. In my experience AND that of my project manager (on his laptop in Houston, Salt Lake and all around), it starts off fine in IE but freezes about 10 minutes in. It freezes is almost EXACTLY the same place using video-js as in using native HTML 5.

Did you run it past 10 minutes? I know it's boring, but you can't assume it works unless it goes ALL the way through.

Regarding Chrome. It fails even earlier with Chrome. I read on the web that webm is the best format for Chrome so I created a webm version & put it into the list of source, now 3. It fails too, slightly farther than before but ahead of where it fails in IE.

In this project, this HAS to work in IE, FireFox, Chrome & Safari. What will happen (on Friday) is the end customer (Aquascape) will send a mass email to a few thousand contractors with a link to this site. We (of course) don't know the browser that the contractor has; most likely one of the 4 just listed

We are thinking of breaking the video into 4 pieces; create 4 html files, when the first ends, go to the 2nd, etc. When the last ends, do what it's supposed to do now.

Any help appreciated.

Are there any options for videojs that would improve it's ability to play LARGE videos?

Thanks
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38833512
I had mine on for about 15 minutes (where there is a stream of water flowing I think)...worked fine for me and never froze/skipped...I'll test it out again (I leave work in about 10 minutes, so that should be a good indication if it'll go further than 10 minutes for me). When I get home I'll run the video in all 4 browsers, all the way through to be sure though.
0
 

Author Comment

by:Richard Korts
ID: 38833523
To Element1910

Are you using IE9? Or IE10?
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38833530
IE8 at work....but got IE9 at home....I'll install IE10 as well to verify if you'd like.
0
 

Author Comment

by:Richard Korts
ID: 38833547
There is another connected problem.

Try http://aquascapegetyourfeetwet.com/play_vid_onlyjsA.htm in ALL 3.

I get black screen in all; in FireFox it plays the sound, no video.

In IE & Chrome, black screen.

This is just plain crazy!!!!
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38836474
I have it working in Firefox and IE for me here at work with no issues. I tried to play the video all the way through last night and it worked fine for me, with no issues on my end...maybe your connection?? are you running through a firewall or proxy that may be causing issues?
0
 

Author Comment

by:Richard Korts
ID: 38836590
Element1910,

There are three separate people who experience the SAME problem. It's not just me and I am POSITIVE it will occur with most of our customers. The question seems to me, "how do you get it to work"?

Do you have special addons to IE. etc. It must be something like that.

If you try it in Chrome, I'm sure will fail, it stops at an earlier point than IE.

I am running out of time. This HAS to be working by Friday.
0
 
LVL 7

Expert Comment

by:Element1910
ID: 38836667
Best option then would be to break it up into multiple videos so the stream is less overhead.

I rarely use IE, so my version that I use here and at home is stock IE. The one at work is what I typically have the most problems with because we go through multiple proxies and DMZ's to get out to the Internet, so I figured I'd have issues with it, but low and behold, it worked fine for me...so I'm not sure what the issue is, unfortunately :(

Sorry I couldn't be of more help.
0
 

Author Closing Comment

by:Richard Korts
ID: 38836803
The problem is NOT solved, I am awarding points based on EFFORT.
0

Featured Post

To Patch or not to Patch? That is the question!

Don't get caught out like thousands of others around the world in the recent Ransomware Fiasco!
Discuss..
- Why it's not a good idea to wait before Patching
- Sensible approaches to Patching discussed
- Add your feedback, comments and suggestions

Question has a verified solution.

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

Suggested Solutions

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

734 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