PDA

View Full Version : Video Tag - What am I doing wrong?



katiebugla
03-14-2012, 04:02 PM
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

jscheuer1
03-15-2012, 03:25 AM
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:


} else {
this.play();
}
});€‹</script>
</body>
</html>

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.

Or copy it from here:


<!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>

katiebugla
03-15-2012, 03:48 PM
Hello, John!

I eventually saw that too... I think it's working now. However, this is ultimately I did with 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:

video {
background:url(../images/company_montage_test.jpg) no-repeat;
border: double;
}


Any guidance and ideas would be appreciated!

jscheuer1
03-15-2012, 04:20 PM
The poster is an attribute of the video tag. So I'd try:


<video id="movieID" width="480" autobuffer poster="../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>

Just make sure the path is correct. And you might have to give the video tag a height attribute.

And Very Important! Don't self close the first half of the video tag! Remove the highlighted:


<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>

katiebugla
03-15-2012, 04:38 PM
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!

jscheuer1
03-15-2012, 05:23 PM
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 /):


<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>

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:


<source src="rrc_company_montage_reel_2012.4.webm" type="video/webm" codecs="vp8, vorbis" />

If not, then:


<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).

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.

katiebugla
03-15-2012, 06:23 PM
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.

jscheuer1
03-15-2012, 06:56 PM
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.

katiebugla
03-19-2012, 03:08 PM
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.

jscheuer1
03-19-2012, 04:01 PM
You still need to get rid of the trailing slash in the opening video tag:


<video id="movieID" width="480" height="286" poster="company_montage_test.jpg"/>

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.

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.

katiebugla
03-20-2012, 02:05 PM
Thanks, John.

I keep forgetting about that backslash (/) - I will try that, but also will really start to investigate the jplayer. Also, I completely forgot about the poster issue. My apologies...

Ultimately I am looking to have the functionality you see... something with a still image and when clicked it launches the video, or something kind of like this http://www.apple.com/ipad/.

Thank you for your patience and support. If I were to contact you for help with jPlayer, would I do that on this forum?

jscheuer1
03-21-2012, 04:55 AM
OK, on that Apple page there's a large image of an iPad that does nothing and also does nothing if clicked. Below that are small images that look like videos. If I click on one of those I'm taken to another page where the video loads and plays in QuickTime. That's in Opera and Firefox. In IE 9 the page wants to install software but doesn't say what software - never a good sign. But even without installing, it runs a video via the video tag instead of just showing that large image of the iPad. If I click on one of the smaller video images below that, the page changes and wants to install software again. At least now it's specific, it wants QuickTime, but that's installed, so I take that as another bad sign and give up.

So I don't think you really want that. What does it do in your browser? Perhaps that's what you want.

I think you want an image that if clicked starts a video that occupies the same spot in the layout where the image you just clicked on was.

That should be doable using jPlayer.


Oh, and if you need to contact me more about this or anything else, right here in the forum is best.

katiebugla
03-21-2012, 02:10 PM
Ok. Duly noted. You are correct in the assumption that I want an image that when hovered over or clicked instigates a video to play... I will attempt to work through a jplayer tutorial and see if I understand how to modify it to our needs (any suggestions for the web developer newbie?)... That said, I was using this kind of coding in my employers site to do somewhat of the same thing (which I should state that I appropriated this from the previous site):


<div id="pic-grid">
<div id="player" style="display: none;" align="left">
<script language="JavaScript" type="text/javascript">
<!-- Hide script from sad old browsers
QT_WriteOBJECT_XHTML('http://riverroadcreative.co/qtms/rrc_ebrcorp.mov',
'480', '285', '');
// -->
</script>
<script type="text/javascript">
AC_AX_RunContent( 'classid','clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B','width','480','height','285','codebase','http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0','src','http://riverroadcreative.co/qtms/rrc_ebrcorp.mov','pluginspage','http://www.apple.com/quicktime/download/' ); //end AC code
</script><noscript><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="480" height="285" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="src" value="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov">
<embed src="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov" width="480" height="285" pluginspage="http://www.apple.com/quicktime/download/">
</object></noscript>
</div>

<div id="trigger" style="display: block;" align="left">
<a target="_blank" onclick="javascript:document.getElementById('player').style.display='block';document.getElementById('trigger').style.display='none';return
false">
<img src="images/rrc_EBR_lg_pstr.jpg" alt="Click to Play" border="0" width="480" height="285">
</a>
</div>
<div class="pic2">
<img src="images/rrc_EBR_sm_02.png">
</div>
</div>

You can also see on the site at: http://riverroadcreative.co/ebr.html

Thank you, again.

katiebugla
03-21-2012, 03:04 PM
I am positive there is a better way to write this but I am not well at all well versed with javascript... but perhaps, I can just clean up what I already have?

katiebugla
03-21-2012, 03:11 PM
<div id="pic-grid">
<div id="player" style="display: none;" align="left">
<script type="text/javascript">
AC_AX_RunContent( 'classid','clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B','width','480','height','285','codebase','http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0','src','http://riverroadcreative.co/qtms/rrc_ebrcorp.mov','pluginspage','http://www.apple.com/quicktime/download/' ); //end AC code
</script><noscript><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="480" height="285" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0"><param name="src" value="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov">
<embed src="http://riverroadcreative.co/qtms/rrc_ebrcorp.mov" width="480" height="285" pluginspage="http://www.apple.com/quicktime/download/">
</object></noscript>
</div>

<div id="trigger" style="display: block;" align="left">
<script>
$("#trigger").click(function() {
$("#player").css('display', 'block');
$("#trigger").css('display', 'none');
});

</script>
<a target="_blank" onclick="javascript:document.getElementById('player').style.display='block';document.getElementById('trigger').style.display='none';return
false">
<img src="images/rrc_EBR_lg_pstr.jpg" alt="Click to Play" border="0" width="480" height="286">
</a>
</div>

Would that be the right way to do that?

katiebugla
03-21-2012, 03:14 PM
But, that's still quicktime-related... sooooo.