Displaying Videos on an HTML Page

by Andrew Servis

Posted: 11 years ago 21 replies

WEB DESIGN

Hi

Currently I have a few pages on my site, one of them has a video on it and I copied this page to create another page with 5 training videos. I copied and pasted the code for the first video 4 times and linked to each video but only one video is displaying, and it appears to be the last video displaying at the top of the page, which should be at the very bottom.

My code for the video is:

Code:

<p align="center"> <script type="text/javascript"> var so = new SWFObject('https://swobjectlocation.com/videocontrollers /player.swf','mpl','640','480','10'); so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true'); so.addVariable('frontcolor','FFFFFF'); so.addVariable('lightcolor','FFFFFF'); so.addVariable('screencolor','FFFFFF'); so.addParam('flashvars','&file=http://www.mysite.com/videos/my_video.mp4&&controlbar=bottom&autostart=false'); so.write('player');</script></p>

I don't know if there is something else I need to do here with regards displaying multiple videos, hopefully someone can point me in the right direction?

If it makes any difference I am also using a dashed table below each video for resource links/download and text:

Code:

<div align="center"> <br> <table class="dashedtable" border="0" cellpadding="15" width="500"> <tbody> <tr> <td> <center> <table border="0" cellpadding="5" width="350"> <tbody> <tr> <td> <div align="left"> <blockquote> <p id="audioplayer5">two</p> </blockquote> </div> </td> </tr> <tr> <td> <p><a href="/videosfolder/videosub/video1.mp4"><img src="/images/myImage.jpg" alt="doc" align="left" border="0" height="54" hspace="15" width="54"></a></p> </td> </tr> </tbody> </table> </center> </td> </tr> </tbody> </table> </div>

Thanks

Andrew

#displaying #html #page #videos

buzilla

11 years ago

It's using the same object to write each player you need to create new objects by changing the so.write('player'). So for two players the code would look like this:

Code:

<p align="center"> <script type="text/javascript"> var so = new SWFObject('https://swobjectlocation.com/videocontrollers /player.swf','mpl','640','480','10'); so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true'); so.addVariable('frontcolor','FFFFFF'); so.addVariable('lightcolor','FFFFFF'); so.addVariable('screencolor','FFFFFF'); so.addParam('flashvars','&file=http://www.mysite.com/videos/my_video.mp4&&controlbar=bottom&autostart=false'); so.write('player1');</script></p>

Code:

<p align="center"> <script type="text/javascript"> var so = new SWFObject('https://swobjectlocation.com/videocontrollers /player.swf','mpl','640','480','10'); so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true'); so.addVariable('frontcolor','FFFFFF'); so.addVariable('lightcolor','FFFFFF'); so.addVariable('screencolor','FFFFFF'); so.addParam('flashvars','&file=http://www.mysite.com/videos/my_video.mp4&&controlbar=bottom&autostart=false'); so.write('player2');</script></p>

Thanks
1 reply

{{ DiscussionBoard.errors[8038451].message }}

Andrew Servis

11 years ago

Originally Posted by buzilla

It's using the same object to write each player you need to create new objects by changing the so.write('player'). So for two players the code would look like this:

Code:

<p align="center"> <script type="text/javascript"> var so = new SWFObject('https://swobjectlocation.com/videocontrollers /player.swf','mpl','640','480','10'); so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true'); so.addVariable('frontcolor','FFFFFF'); so.addVariable('lightcolor','FFFFFF'); so.addVariable('screencolor','FFFFFF'); so.addParam('flashvars','&file=http://www.mysite.com/videos/my_video.mp4&&controlbar=bottom&autostart=false'); so.write('player1');</script></p>

Code:

<p align="center"> <script type="text/javascript"> var so = new SWFObject('https://swobjectlocation.com/videocontrollers /player.swf','mpl','640','480','10'); so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true'); so.addVariable('frontcolor','FFFFFF'); so.addVariable('lightcolor','FFFFFF'); so.addVariable('screencolor','FFFFFF'); so.addParam('flashvars','&file=http://www.mysite.com/videos/my_video.mp4&&controlbar=bottom&autostart=false'); so.write('player2');</script></p>

Thanks for that info buzilla very much appreciated

Andrew

Thanks

{{ DiscussionBoard.errors[8040518].message }}

SmallBizWebsites

11 years ago

Just a note of caution- you are using Flash to play the video. Flash is now considered obsolete for this purpose because it does not work on mobile devices. You should look into using an HTML5 based player which will work across all platforms and browsers.

[ 2 ] Thanks
2 replies

{{ DiscussionBoard.errors[8038956].message }}

MarcelBehrens

11 years ago

Originally Posted by SmallBizWebsites

I second this. HTML5 is the way to go. Also easier to implement than Flash.

[ 1 ] Thanks

{{ DiscussionBoard.errors[8038986].message }}

Brandon Tanner

11 years ago

Originally Posted by SmallBizWebsites

Flash is nowhere near obsolete yet (but it probably will be, or at least close to it, within a handful of years). It still works just fine on the vast majority of desktop browsers out there. And even though Android has officially dropped support for it, it still works on most Android devices if you install a Flash player app. It doesn't work on Apple devices though (unless you jailbreak them).

But I agree that HTML5 video is the way to go now. If you want to cover all your bases, use HTML5 video with Flash fallback. Most modern players (JWPlayer, Flowplayer, etc) provide this functionality.

[ 2 ] Thanks
2 replies

Signature

{{ DiscussionBoard.errors[8039630].message }}

JamesLennon

11 years ago

Yep flash is a pain! Mainly because I am a iPhone user!

HTML5 video player is the way to go and very easy check out..

Code:

video poster="yoursite/poster.jpg" controls>
  <source src="yoursite/trailer.mp4" type="video/mp4" >
  <source src="yoursite/trailer.ogg" type="video/ogg" >
  <source src="yoursite/trailer.webm" type="video/webm">
</video>

you need the different versions as different browsers only accept certain video types

[ 1 ] Thanks
2 replies

Signature

Follow my blog on creating an authority site

{{ DiscussionBoard.errors[8039780].message }}

Michael71

11 years ago

There is still no fallback for older browsers...

This is a bad way.. always provide a fallback!

Originally Posted by JamesLennon

Yep flash is a pain! Mainly because I am a iPhone user!

HTML5 video player is the way to go and very easy check out..

Code:

video poster="yoursite/poster.jpg" controls>
  <source src="yoursite/trailer.mp4" type="video/mp4" >
  <source src="yoursite/trailer.ogg" type="video/ogg" >
  <source src="yoursite/trailer.webm" type="video/webm">
</video>

you need the different versions as different browsers only accept certain video types

[ 1 ] Thanks
2 replies

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8039823].message }}

Brandon Tanner 11 years ago

Originally Posted by Michael71

There is still no fallback for older browsers...

This is a bad way.. always provide a fallback!

Yep. As great as HTML5 video is, it does not work at all in IE 6/7/8... so you need to use Flash fallback if you want your video to work in those browsers. I'm sure it varies from niche to niche, but my server stats for most of my sites show that a significant percentage of my website visitors are still using IE < 9, so as much as I'd like to forget about those #@^$!& browsers , I can't do it just yet.
- Thanks
Signature
{{ DiscussionBoard.errors[8039886].message }}
JamesLennon 11 years ago

Originally Posted by Michael71

There is still no fallback for older browsers...

This is a bad way.. always provide a fallback!

I couldn't find my code for the fall back.
I could always write the whole website for the op
- Thanks
Signature

Follow my blog on creating an authority site
{{ DiscussionBoard.errors[8040250].message }}

Andrew Servis

11 years ago

Originally Posted by JamesLennon

Yep flash is a pain! Mainly because I am a iPhone user!

HTML5 video player is the way to go and very easy check out..

Code:

video poster="yoursite/poster.jpg" controls>
  <source src="yoursite/trailer.mp4" type="video/mp4" >
  <source src="yoursite/trailer.ogg" type="video/ogg" >
  <source src="yoursite/trailer.webm" type="video/webm">
</video>

you need the different versions as different browsers only accept certain video types

Hey James what are these different video type extensions you are showing here? Is this the different types of video for different browser you mentioned....that one HTML5 player is capable of playing??

Update:

I just answered this myself

I see here the chart 3/4 down the page that tells you the different types:

http://videojs.com/

Thanks

Andrew

Thanks
1 reply

{{ DiscussionBoard.errors[8040543].message }}

JamesLennon

11 years ago

Originally Posted by Andrew Servis

Yes the html5 player will play any of them.
Different browsers can play certain file types, I forget which plays what. I quick google search can tell you that.

You don't need any more code than that as the browser will find the correct format to play. Although there is more code if you want to have a flash fall back player incase the user uses an older ie browser.

[ 1 ] Thanks

Signature

Follow my blog on creating an authority site

{{ DiscussionBoard.errors[8040548].message }}

Andrew Servis

11 years ago

Originally Posted by Brandon Tanner

Flash is nowhere near obsolete yet (but it probably will be, or at least close to it, within a handful of years). It still works just fine on the vast majority of desktop browsers out there. And even though Android has dropped support for it, it still works on most Android devices if you install a Flash player app. It doesn't work on Apple devices though (unless you jailbreak them).

But I agree that HTML5 video is the way to go now. If you want to cover all your bases, use HTML5 video with Flash fallback. Most modern players (JWPlayer, Flowplayer, etc) provide this functionality.

Hey Brandon.......am I best sticking with the same type of video (MP4) to play with an html5 player?

Thanks
1 reply

{{ DiscussionBoard.errors[8040523].message }}

Brandon Tanner

11 years ago

Originally Posted by Andrew Servis

Hey Brandon.......am I best sticking with the same type of video (MP4) to play with an html5 player?

For maximum compatibility you'll want to use all of the HTML5 video formats (mp4, ogv, webm)... meaning that you'll have to render your video to 3 different formats.

If you don't already have a good converter, this one works well.

1) Drag your source video file into the converter (preferably an uncompressed avi file)

2) Select "To HTML5" at the bottom

3) Select the "Same as source" preset, then specify the output location, then click "Convert"

It will then automatically convert the video to all 3 HTML5 video formats.

Once you have all 3 video files, you'll want to use a good HTML5 video player like Flowplayer or JWPlayer. When configuring the video player, make sure you set it up to use HTML5 video as the default, with Flash fallback. If you do that, it will cover virtually ever browser out there.

One other tip... after you convert the video to the HTML5 formats, you'll want to use this on the MP4 file before you upload it. That will allow the video to begin playback much quicker. You only have to do that with the MP4 file... it's not necessary with the ogv and webm files.

[ 1 ] Thanks
1 reply

Signature

{{ DiscussionBoard.errors[8040696].message }}

Andrew Servis

11 years ago

Thanks a bunch for the input from everyone this has saved me future problems with compatibility/viewing problems

Will look into this over the wkend and try and get something implemented soon!

Andrew

Thanks
1 reply

{{ DiscussionBoard.errors[8042162].message }}

Andrew Servis

11 years ago

So far converted one of my videos and using JWPlayer but when I view it I have to wait till the video downloads before it'll play. Going by the advice given on the JW forums I downloaded indexswapper - link below - that requires adobe air.

QTIndexSwapper 2 - Renaun Erickson | Renaun Erickson

This swaps round the indexing of the video and apparently it will play off the bat, but I tried that and it said "MOOV is in proper place, processing not needed." Full log below:

Version: C:documents and SettingsHomePCMy DocumentsCamtasia Studiomyvideo.mp4 -
Atom Metadata: [code: ftyp,size: 24,offset: 0]
Atom Metadata: [code: moov,size: 232280,offset: 24]
Atom Metadata: [code: uuid,size: 2744,offset: 232304]
Atom Metadata: [code: mdat,size: 9857315,offset: 235048]
ERROR: MOOV is in proper place, processing not needed.
Completed Time: 0.08s

I am only running the mp4 just now to see how it goes and this is the code below:

Code:

<div id="myElement">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("myElement").setup({
        flashplayer: "videos/myvideo.mp4",
        height: 480,
        width: 640,
        image: "",
        
    });
</script>

I wonder if my original video conversion is causing a problem. I converted mp4 to AVI as was suggested it was best to convert to html5 from avi, this then gave me the mp4,webm and ovg. As I said I am just trying with mp4 just now and having to click on the play button to download before the video plays.

Is there a known issue and a fix for this or is perhaps the way the video was originally converted? I might try playing my original mp4 and seewhat happens as well.

Andrew

Thanks
1 reply

{{ DiscussionBoard.errors[8057807].message }}

Brandon Tanner

11 years ago

Did you use this on the MP4 file before you upload it? That's why I recommended it... because it makes MP4 files begin playback much quicker.

Also, what is the file size of your MP4 file? If it's really big, it can take a little while to buffer, even if the video is perfectly optimized... especially on slower internet connections.

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[8058764].message }}

Andrew Servis

11 years ago

Originally Posted by Brandon Tanner

File size is 18Mb. I never used that rndware at all but did try that other tool to reverse the index but it said it was ok and never needed converting. Can't work out why the original MP4 worked ok with the old JWplayer, as I said I am going to try the original MP4 file and see what happens.

Andrew

Thanks
1 reply

{{ DiscussionBoard.errors[8059517].message }}

Brandon Tanner 11 years ago

18MB is nothing, so your file size is definitely not the issue here. I've used the software I recommended to you countless times and it's always worked perfectly for me, so you might want to give that a shot.
- Thanks
Signature
{{ DiscussionBoard.errors[8059729].message }}

goodtimesathome 11 years ago

I'd second what smallbizwebsites said, with flash, it doesn't work accross the board, and you can lose a good deal of visitors because of it.

Either go with youtube iframe or a html5 video player script.

Good Luck!
- Thanks
{{ DiscussionBoard.errors[8040402].message }}
David V 11 years ago

I want to make a note about Html5 (which I do like...)
You cannot stream Html5, except on Safari and IOS.
So live streaming from services like Adobe and Amazon S3/Cloudfront is something you can't do as they are served off flash with html5 as a fallback.

Here's some good recent research worth noting by Longtail Video.
- Thanks
- 1 reply
{{ DiscussionBoard.errors[8059980].message }}
- twentywon 11 years ago
  
  maybe you guys have a solution.
  
  I've embeded html5 onto a site with all 3 formats : mp4, ogv, and webm, even with a flash backup.
  
  Ive tried all sorts of different codes but for some reason when the video loads its muted on Internet Explorer. Ive tested it on a few different computers and even tried mute="false" in the code.
  
  Anybody else have this problem or have a solution?
  
  This code is as close as I've gotten. The video loads fine on chrome and firefox and ipad/safari, but when it loads / autoplays on ie10 it doesnt have any sound. its muted and you cant unmute it!
  
  PHP Code:
  
  <video controls="controls" autoplay="autoplay" width="640" height="360"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogv" type="video/ogg" /> <source src="video.webm" type="video/webm" /> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=640 HEIGHT=360> <PARAM NAME=movie VALUE="video.swf"> <PARAM NAME=quality VALUE=high> <param name="wmode" value="transparent"> <embed src="video.swf" quality=high bgcolor=#FFFFFF width="450" height="350"name="cloudsflash02" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </OBJECT> <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-5.4.2.swf" width="640" height="360"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-5.4.2.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':[{'url':'video.mp4','autoPlay':true}]}" /> <span title="No video playback capabilities, please download the video below">Click here</span> </object> </video>
  
  Thanks
  
  {{ DiscussionBoard.errors[8121467].message }}

Displaying Videos on an HTML Page

Trending Topics

Any thoughts on golf's latest phenom...Scottie Scheffler??

Should i Index Author pages?

best high quality crypto traffic.

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

Some interesting stats about brand comms