CODEWITHSUNDEEP
jqueryhtml5-videovideo.js
coderJoker
coderJoker

Reputation: 26

Using a button to play a video in html5 with video.js; MEGA PROBLEMS

Help! I have spent 3 days trying to figure this problem with my code for video.js! Please help! OK, I have a ~10mb mp4 video that plays fine in VLC. I am building a website using jquery that uses video.js to handle this mp4. I have the header tags to access video.min.js, video-js.min.css and jquery-3.1.1.min.js. I wrapped the html5 video-tag in li-tag in a div-tag in a ul-tag in the body-tag:

<div class="cast">
    <li><video  id="T2Scast" class="video-js vjs-default-skin" preload="auto" data-setup="{}">
        <source src="test.mp4" type="video/mp4">
        <source src="test.webm" type="video/webm">
    </video></li>
</div>

Note, I removed the 'controls' entry for the tag. I styled this video with a css entry for size, opacity and z-index. I overlay a .png template with some clear areas completely over the video underneath. I made another button .png and put that with the highest css z-index on top with an img ID="btn" tag.

<li><img class="corner" id="btn" src="corner.png" /></li>

Then I have code to control this in another main.js file. I have 2 variations I've tried, the second with MEGA PROBLEMS. The first snippet ONLY works on a laptop/desktop with local files and is a kind of 'autoplay' (the autoplay for the video.js tag works fine on the laptop/desktop ONLY; when I delete it from the html5 and use this jq replacement it plays fine on laptop/desktop ONLY):

var $vde = $("#T2Scast");
$vde.on("canplaythrough", function() {
	TweenLite.to($vde, .5, {autoAlpha:1})
	this.play();
	$vde.on("ended", function(){
	TweenLite.to($vde, .5, {autoAlpha:0})
	})
});
The end tween works fine, the first tween is being bypassed for [reasons] and I don't care because this is not what I want... But, I know I have at least this functionality on laptop/desktop for Firefox and Chrome.

2nd I have tried this:

var $vde = $("#T2Scast");
var $vdeBTN = $("#btn");
$vdeBTN.on("click", function() {
	TweenLite.to($vde, .5, {autoAlpha:1})
	
	videojs("#T2Scast").src({type: "video/mp4", src: "test.mp4"});

/*ALTERNATIVELY I HAVE TRIED VARIATIONS OF this.play(); 
or using jq to set the html5 tag to some variation of 
"autoplay":true in the DOM or referencing videojs() or 
setting up other vars... and many, many more totally 
unresponsive snippets of code... ARRRGH!*/

	$vde.on("ended", function(){
	TweenLite.to($vde, .5, {autoAlpha:0})
	});
});

This is very frustrating for me. When I set the css opacity=1 I can see a freeze frame of the first frame of the video; when I set the opacity=0 it will tween in and still show that same freeze frame. WHAT am I doing wrong? Why can't I have a .png floating around somewhere and attach an eventListener 'click' and pass that event into the video? I get that if I have an image layered over the video I cannot use the video play controls or a button under that layer, which is why I put my button at the top z-index. LOST.

[PS later, I am going to ask the question NEXT as to why only the audio plays after I upload this to the server using case #1 with autoplay; I have been trying to detect the MIME with firebug to see if it's the wrong type, but [MORE FRUSTRATION]... that's another question for another thread.]

Here is the full site: http://www.et-ent.com

BTW, I have to add that the functionality in case #2 above DOES NOT WORK after I upload it and open it in my browser from the web (the tween to a frozen frame that should be a playing video...), though it works on my desktop from a local folder to show the frozen frame which should be the playing video... Ouch.

Upvotes: 0

Views: 762

Answers (1)

coderJoker
coderJoker

Reputation: 26

OH MY EFFING LORD. Solved it, but have no idea how... I have tried this bit before but it didn't work then... and I have no idea why it is working now.

	var $vde = $("#T2Scast").get(0);
$vde.play();
You tell me. 3 days and NOW it works. LOL java!

Upvotes: 0

Related Questions