I'm trying to use Video.js 4.11 and after debugging I still couldn't make the video play in IE8 emulation. Strangely, video.js 4.12 version would cause a crash on IE8 emulation and it seems like there is a JSON problem involve the "data-set" tag?
Also, I noticed that even though I designed my own skin for video js, the "border-radius" is been override back to the default value while other things are working good. (my big play button should be a circle but in IE8 emulation, it became a square.)
Just to prove that it's not my video files' problem, I wrote a version based on the Video.js's example and using a lot of their codes but just changed slightly so the appearance would meet my needs.
Everything that I'm referencing locally, I have checked the path and they should be working fine.
Any suggestions and help would be highly appreciate.
Update:
I solved the problem by adding this line of code:
<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>
Just in case someone had the same problem that their flash fallback is not working on IE8.
Here's my final code for reference:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Video.js demo</title>
<link type="text/css" href="http://vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
<script type="text/javascript" src="http://vjs.zencdn.net/4.11/video.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>
<style type="text/css">
.vjs-default-skin {color: #F5F2F2;}
.vjs-default-skin .vjs-big-play-button{left:45%;top:40%;border-radius:100%;border-width:0.1em;width:1.8em;height:1.8em;}
</style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<video id="example" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<!-- Flash Fallback. -->
<object type="application/x-shockwave-flash" data="flowplayer-6.0.1/flowplayer.swf" width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="movie" value="flowplayer-6.0.1/MirandaS1E01.flv">
<!--[if IE8]><param name="movie" value="flowplayer.swf"><![endif]-->
</object>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
</div>
</body>
</html>
Related
I've been getting very high bandwidth consumption on my server and I was wondering if the following markup results in more information being requested than what is necessary. Is that the case or would this work as expected?
Here is my markup:
<div id="video-container">
<object class="video" height="100%" width="100%">
<param name="movie" value="http://cutmeoffmidfunk.s3.amazonaws.com/bill.swf">
<param name="scale" value="exactfit" />
<param value="transparent" name="wmode">
<![if !IE]>
<object class="video" type="application/x-shockwave-flash" data="http://cutmeoffmidfunk.s3.amazonaws.com/bill.swf" height="100%" width="100%">
<param value="transparent" name="wmode">
<param name="scale" value="exactfit" />
</object>
<![endif]>
<![if !IE]>
<div class="video">
<video class="video" height="100%" width="100%" autoplay loop >
<source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.mp4" type="video/mp4">
<source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.webm" type="video/webm">
<source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.ogg" type="video/ogg">
</video>
</div>
<![endif]-->
<!--[if IE]>
<div class="video" >
<object class="video" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="100%" width="100%">
<param name="src" value="http://cutmeoffmidfunk.s3.amazonaws.com/bill.mov">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="100%" width="100%">
</object>
</div>
<![endif]-->
<![if !IE]>
</object>
<![endif]>
</object>
</div>
<audio id="audioplayer" autoplay loop>
<source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.mp3">
<source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.ogg">
</audio>
The HTML you posted seems to be malformed as thre are missing /> on some of the params. There is also an extra tag for non ie browsers and your first and last set of conditional commens are malformed. I would fix those and then take a look at what the code does.
When correctly formed, your code and you are not in IE:
your code will load the bill.swf file for the outer object
it will then use the next object as well, which may or may not, depending on your cache settings cause bill.swf to be loaded again.
Then it will start loading the assets in the sources. The browser may or may not decide to download all three files or just the one it needs.
When in IE:
your code will load the bill.swf file for the outer object
it will then use the next object as well, which may or may not, depending on your cache settings cause bill.swf to be loaded again.
Then it will start loading the assets in the third declaration only.
Once you have fixed the HTML and made sure that the assests you are requesting are necessary and your desired outcome is achieved, if you are still experiencing high load, you may want to consider using a service like CloudFlair (I don't reccomend CloudFlair, although they are cheap as free on many cPanel hosts) in order to cache files and keep load off of the server itself. You may also want to look at the chache headers you set on served content to see if files that don't change that often can be set to cache for long periods of time so that they will only need to load once on each client and reduce server load.
We are posting a video in our website.Video created by Adobe Captivate(.swf file). I am doing this by using object tag. The problem is flash player doesn't have fullscreen option.So we have to set size of flash using width and height parameters. But Its not possible to give width and height suitable for all resolutions.So is there any way to give video height relative to PC resolution? Or is there any way to play flash in full screen? By the way we are using flash player 11.6 with active_x
UPDATE
I have tried your swiffit method..here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swffit.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "11.6.0");
swffit.fit("myFlashContent", 1000, 590);
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
<param name="movie" value="D:\desktop\BS demo.swf">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="D:\desktop\BS demo.swf" width="800" height="600">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
But fullscreen not working.. Is there anything i am missing? do i have to change anything in swiffit.js file?
Looking at your code, I see one problem, that is you seem to have forgotten to include the allow full screen parameter. try adding
<param name="allowFullScreen" value="true" />
I have no previous experience with actionscript, so I won't be able to help you with your .swf file, but I'm sure you will find this article about working with full screen mode
useful.
I have the following code to display the swf object on the page. It works well in all browsers. However, if shockwave flash turned off in Firefox, it won't fallback into image and show bunch of characters instead looking like "CWS q�x��wX�Y�7z�..." All other browsers fallback to the image. I verified that we serve application/x-shockwave-flash MIME type on our server.
<script type="text/javascript">
swfobject.registerObject("fd_flash","8.0.0");
</script>
<div>
<object height="376" id="fd_flash" width="940">
<param name="movie" value="path/file.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object data="path/file.swf" height="376" type="application/x-shockwave-flash" width="940">
<!--<![endif]-->
<div><img src="path/image.jpg" /></div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
Thank you!
You could try another way of using swfobject. Add a link in your <head> to your swfobject.js file, then in your <body> put this:
<div id="yourFlashDiv">
<!-- ALTERNATE CONTENT GOES HERE -->
<p>This paragraph will show if your Flash content won't</p>
<!-- FLASH CONTENT GOES HERE -->
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("path/file.swf", "SwfTitleGoesHere", "376", "940", "8", "#FFFFFF");
so.addParam("wmode", "opaque");
so.write("yourFlashDiv");
// ]]>
</script>
</div>
This is what I've used for swf display, and it has failed gracefully on every browser I've tested. Hope this helps
there. I know that there is a possibility to open a video file either using a flash player or html5 in a browser, but is there a possibility to open it at the certain place (lets say 60 seconds from the beginning) or automatically fast forward it after opening? Any code examples would be appreaciated.
Ok, I had to find the answer myself. A similar question was addressed at How do I play just a specific section of a video in a web page?
(but without giving specific examples).
I found out that for flv types you can use flowplayer:
http://flowplayer.org/documentation/scripting.html
My minimal working example:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>
<title>Minimal Flowplayer setup</title>
</head>
<body>
<div style="display:block;width:520px;height:330px" id="player"> </div>
</body>
<script>
$f("player", "../flowplayer-3.2.5.swf", {
clip: {
url: "four_stroke.flv",
autoPlay: true
},
// you can seek to a certain place of a clip just after that place is already is buffered
onStart:function() {
this.seek(10);
}
});
</script>
</html>
For quicktime movie types you can use quicktime plugin and set start or autoplay parameters to start a video clip at specified place like that:
<PARAM Name="AUTOPLAY" Value="#00:03:15:01" >
or
<PARAM NAME="STARTTIME" VALUE="00:03:15:01" >
more explanations at: http://developer.apple.com/library/mac/#documentation/QuickTime/Conceptual/QTScripting_HTML/QTScripting_HTML_Document/ScriptingHTML.html
Here is my code example that works in my FF3.6 and IE8 (put it in your HTML's body area):
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"
HEIGHT=650
WIDTH=1000
>
<PARAM NAME="src" VALUE="ksetup.mov" >
<PARAM NAME="STARTTIME" VALUE="00:03:00:00" >
<PARAM NAME="AUTOPLAY" VALUE="false" >
<EMBED
SRC="ksetup.mov"
HEIGHT=650 WIDTH=1000
TYPE="video/quicktime"
BGCOLOR=#00ff00
AUTOPLAY="false"
STARTTIME="00:03:00:00"
PLUGINSPAGE="http://www.apple.com/quicktime/download/"
/>
</OBJECT>
Hope this will put someone on track.
Are there any ways providing an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
I’ve found recommendations, like the following from W3C, which determine via JavaScript the existence of Adobe Flash on the client: W3C Providing alternative images
Honestly, I would prefer a non JS technique. I’m thinking of some XHTML tag, equivalent to <noscript>. (like <noobject> if the object (in our case Flash) can’t be displayed/loaded).
The reason for needing this separation is the following:
The bank I’m working for will preferably display their banners in Flash format. In case it isn’t possible a simple image should be shown.
In the past it was solved very likely in the way mentioned before. We’re currently working on a design refresh and that’s where I stumbled upon this piece of code which makes me wonder if it’s really the most elegant and compatible way of doing so.
Another idea that strikes me: Is it actually possible to load Flash-objects in a JavaScript disabled environment?
Actually having flash installed but javascript turned off is a valid scenario. This should work across most browsers:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flash.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
<!--<![endif]-->
<img src="(...)" alt="Put your alternate content here" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I use the following code for graceful degradation. It works well.
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="100">
<param name="movie" value="flash.swf" />
<!--><!--dgx-->
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
<img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->
I don't know why you want to avoid javascript, it is the best solution when dealing with Flash.
using the SWFObjects Library (the best known so far for the matter) you can do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Home Page </title>
<meta name="viewport" content="width=780">
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="splashintro">
<img src="splash_noflash.png" />
</div>
<script type="text/javascript">
var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899");
so.write("splashintro");
</script>
</body>
</html>
what the script does is replace the splashintro div with the flash file, if the browser does not support Flash, then does nothing and the splash_noflash.png will be shown.
P.S. With this technique you are ready for the iPhone, instead of showing the blue cube, it will show the image :)
I find using inline styling to do the trick.
For example:
<div style="background-image: url('...');">
<object>
/* Embedded Flash */
</object>
</div>
We can provide an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->
<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
And also add this...
<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");
</script>
I have written an easy way to do this in CSS - no extra JavaScript at all.
Name your ID/Class where your Flash movie resides and use a background image. Wrap your Flash movie within that div.
For example:
<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.
Then in your CSS:
#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}
When the Flash isn't available, say on the iphone/pad, the graphic will display. The only drawback with this, that I have found, is that if your Flash movie uses a transparent background, you will see the alt graphic through the transitions. Just make a solid color within the Flash movie as your lowest layer (make sure it's the same bg color as the website) and it will look fine.
~GreaseJunkie