http://jsfiddle.net/yfrn2/12/
I was just introduced to jsfiddle... I want this to happen...
This is what is currently happening... What am I doing wrong?
http://riverroadcreative.co/video_mockup/index.html
Printable View
http://jsfiddle.net/yfrn2/12/
I was just introduced to jsfiddle... I want this to happen...
This is what is currently happening... What am I doing wrong?
http://riverroadcreative.co/video_mockup/index.html
Oddly it works in Opera, while both Firefox and IE are complaining of an illegal character on line 24. It's actually 3 chars in ANSI:
And only visible if you open the file as ANSI encoded. If you open it encoded as UTF-8, the characters are invisible (and probably are only one char). But you should be able to get rid of them in any editor by highlighting the line and deleting it, then retyping it 'by hand' - don't paste.Code:} else {
this.play();
}
});​</script>
</body>
</html>
Or copy it from here:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="video_styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<video id="movieID" width="480" autobuffer>
<source src="http://riverroadcreative.co/qtms/rrc_company_montage_reel_2012.4.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://riverroadcreative.co/qtms/rrc_company_montage_reel_2012.4.mp4" type="video/mp4" />
</video>
<script>
movie = $('#movieID');
movie.on('click', function() {
if (this.paused === false) {
this.pause();
} else {
this.play();
}
});</script>
</body>
</html>
Hello, John!
I eventually saw that too... I think it's working now. However, this is ultimately I did with code
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="video_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<video id="movieID" width="480" autobuffer/>
<source src="rrc_company_montage_reel_2012.4.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="rrc_company_montage_reel_2012.4.mp4" type="video/mp4" />
</video>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
movie = $('#movieID');
movie.on('click', function() {
if (this.paused === false) {
this.pause();
} else {
this.play();
}
});
</script>
</body>
</html>
Now, I am looking to add a still frame or poster frame at the beginning and I am not sure how to enable that functionality. This what I currently tried (CSS) and seemingly failing with this option:
Code:video {
background:url(../images/company_montage_test.jpg) no-repeat;
border: double;
}
Any guidance and ideas would be appreciated!
The poster is an attribute of the video tag. So I'd try:
Just make sure the path is correct. And you might have to give the video tag a height attribute.Code:<video id="movieID" width="480" autobufferposter="../images/company_montage_test.jpg">
<source src="rrc_company_montage_reel_2012.4.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="rrc_company_montage_reel_2012.4.mp4" type="video/mp4" />
</video>
And Very Important! Don't self close the first half of the video tag! Remove the highlighted:
Code:<video id="movieID" width="480" autobuffer poster="company_montage_test.jpg"/>
<source src="rrc_company_montage_reel_2012.4.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="rrc_company_montage_reel_2012.4.mp4" type="video/mp4" />
</video>
Ok, AWESOME! A couple more questions:
Why is the poster resizing (I am positive that I put it at the same dimensions as the movie... could I be missing something?)
Also, the poster frame will appear in Google Chrome and I can hear the audio - but no video appears.
Thoughts?
Thanks again!
Chrome may need to have controls in order to work properly. I'm not sure of that though. If it's true, there may be a workaround, also not sure of that.
You should get rid of the self closing token in the first half of the video tag (remove the red /):
And I'm not real sure the quoting syntax is correct on the type/codec attribute. Aren't they two separate attributes? If so it should be:Code:<video id="movieID" width="480" height="286" autobuffer poster="company_montage_test.jpg"/>
<source src="rrc_company_montage_reel_2012.4.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="rrc_company_montage_reel_2012.4.mp4" type="video/mp4" />
</video>
If not, then:Code:<source src="rrc_company_montage_reel_2012.4.webm" type="video/webm" codecs="vp8, vorbis" />
But nesting quotes as you have it there isn't anything I've ever seen for a compound attribute. So it's either separate, with each being quoted, or single with only one set of quotes around the value (the two choices I just gave you).Code:<source src="rrc_company_montage_reel_2012.4.webm" type="video/webm; codecs=vp8, vorbis" />
But since you're already using jQuery, consider jPlayer:
http://www.jplayer.org/
It works all of these details out and even has Flash fallback for those browsers not supporting the video tag.
Thanks, I appreciate your input and I will continue to investigate... I am relatively new to web design/development. So I am constantly running trials and making MOSTLY errors. I am not to comfortable with the non-beginner-friendly-ness (I am the epitome of web-blonde) of jplayer.... and I guess I was hopeful that the video tag would be a sigh of relief for me.
I will update with progress and most likely questions.
Oh, one thing I didn't cover, about the size of the poster - It will scale to the dimensions specified for the video tag. If for some reason (accounting for borders, padding, margin, and/or aspect ratio of the video, etc.), the browser has to modify those from what you have in the tag, the poster will scale to those new dimensions. Come to mention it those dimensions themselves might be to blame if they're not those of the poster.
Another thing to keep in mind is that it's much easier for me to advise you if your live page reflects the current setup. At this point I'm not sure whether or not you've been updating it along with whatever local changes you've been making. And speaking of local changes, some browsers will not support some features of the video tag and/or will support them differently when/unless it's live.
Hello John!
I am not sure I am understanding what you mean on the poster front.
Also, I had been updating as I was getting different input, so my apologies... I am currently in a state where the video works in safari. In google chrome, the when the poster image is clicked only audio can be heard and no video. And in firefox, nothing happens when the poster image is clicked... Or at least that is what is happening on the station I am working on (iMac)
I will not touch this anymore (PROMISE) until I completely understand the fixes I need to make... and I will certainly let you know when I make those changes.
Thank you, again.
You still need to get rid of the trailing slash in the opening video tag:
That prevents IE (IE 9, only IE 9 and better use the video tag) and perhaps others from reading any of the source tags. I'm not saying it will fix it in IE 9, but it will give IE 9 a fighting chance, and may help others as well.Code:<video id="movieID" width="480" height="286" poster="company_montage_test.jpg"/>
The thing about the poster is just that, if it's resizing, you did complain about that, right? If that's happening it's because the browser thinks it has to in order to get it to fit in the video tag. There are a number of things that could be affecting that which I outlined in my previous post.
But, as long as the poster isn't becoming overly distorted, I wouldn't worry about it. Or, if I misunderstood you and this isn't bothering you, same thing - don't worry about it.
Back to jPlayer. I know it seems a bit complicated. But the plain truth is that the video tag just isn't cross browser. IE 8 and less for example don't support it at all and anyone stuck with Windows XP, there are quite a lot of those people, cannot update to IE 9.
Then there are the differences in browsers that do support it with one needing one type of video file, another needing another, and one needing one syntax for the tag, and another needing another syntax.
jPlayer pretty much takes care of all of these things for you (you still need to supply the various video files). Once you familiarize yourself with it, you can get it to do pretty much whatever you want it to cross browser. If jPlayer can't do it, it probably can't be done, and more often than not jPlayer will find a way to create an acceptable fall back for any browser that cannot do exactly what you want.
And jPlayer has a number of demos with various skins and the option to make your own skin. Using code that's already developed might be the easiest way to go for now with the video tag. In a number of years its use should become more standardized across browsers. And non-supporting browsers will eventually die out. Until then, why worry about all the details and quirks of the tag when there's something that will do that for you?
I'm learning jPlayer too and would be happy to help you in understanding the jargon.