Hi I'm trying to modify a web page so that it loads faster.
Since I have some videos embeded (blip.tv but can change it to youtube if it helps) I was wondering if you could load an image where the video should be and on click replace the image with the video and start playing (without reloading the whole page).
I think I've seen this before, but can't find it anywhere anymore!
right now the code to embed I use is:
<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>
Thanks
Quick and dirty: you could just set the embed code as a global variable somewhere:
<script type="text/javascript">
var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>
Then put the image in a container div and replace the container's innerHTML onclick:
<div id="videocontainer">
<img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>
There's a Google code project called SWFObject, which is perfect for what you need. It's a cross-browser javascript library for loading flash - and you could use it to replace your image with the flash video when someone clicks on the image, for example.
Related
![enter image description here][1]I've tree jpg to show. Here's the html:
<img id="carrossel1" class="imagemCarrossel" src="/images/home/fundo_carrossel1.jpg" />
<img id="carrossel2" class="imagemCarrossel" src="/images/home/fundo_carrossel2.jpg" />
<img id="carrossel3" class="imagemCarrossel" src="/images/home/fundo_carrossel3.jpg" />
The first one is rendered fine. The two other not.
The image folder have:
fundo_carrossel1.jpg
fundo_carrossel2.jpg
fundo_carrossel3.jpg
The 2nd and 3rd don't show up in Chrome of Firefox...
Maybe your CSS is modifying the elements resulting in a change of display behavior. Can you post the CSS you are using to further try to help?
I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)
Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)
I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click play?
<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
<audio controls="controls" preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Note - preload="none" - can be used with VIDEO HTML5 and AUDIO HTML5.
The preload attribute is supported in all major browsers, except Internet Explorer and Opera.
MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:
<script type="text/javascript">
function addAudio(t) {
var l=t.innerHTML.length;
var audioName=t.parentElement.id;
if( t.children.length==0) {
t.innerHTML=t.innerHTML+' <audio controls="controls"><source src="'+
audioName+'.ogg" type="audio/ogg" /><source src="'+
audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
}
}
</script>
and then use DHMTL to dynamically add the audio tag, for example:
<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>
What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.
Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.
In html page,I can embed vlcplugin as mentioned in videolan page, and get the reference to plugin using jquery.
But it seems that the play(), pause() methods are supported only by vlcplugin upto 0.8.5. How do you play and pause a recent version of plugin?
<embed id="vlcp"
type="application/x-vlc-plugin"
pluginspage="http://www.videolan.org"
name="VLC"
autoplay="no"
loop="no"
volume="100"
width="640"
height="480"
target="test.flv">
</embed>
<a id="playbutton" href="#">Play</a>
<a id="pausebutton" href="#">Pause</a>
I can get reference to the plugin as below
var player = document.getElementById("vlcp");
Now, what do I call to make the embedded plugin play the clip?
I am using firefox as browser, will embedding vlcplugin in html work in chrome ?
You have to use the Playlist object of your VLC player as showed here.
In your particular example, you didn't really create an actual playlist, but you implicitly added one item to it (your "test.flv").
Here's how you can now control your movie (regardless of whether it's Mozilla, Chrome, or IE) - code in CoffeeScript:
player = document.getElementById("vlcp")
if player and player.playlist
// you could also check whether the playlist isn't empty using
// player.playlist.items.count
playlist = player.playlist
// pick whichever action you need from below
playlist.play()
playlist.togglePause()
playlist.stop()
You can also check whether the player is currently playing or paused/stopped by using
// assuming you got the playlist like above
playlist.isPlaying
Here is a demo example:
<html>
<head><title>Demo of VLC mozilla plugin</title></head>
<body>
<h1>Demo of VLC mozilla plugin - Example 1</h1>
<embed type="application/x-vlc-plugin"
name="video1"
autoplay="no" loop="yes" width="400" height="300"
target="http://server.example.org/video1.vob" />
<br />
<a href="javascript:;" onclick='document.video1.play()'>Play video1</a>
<a href="javascript:;" onclick='document.video1.pause()'>Pause video1</a>
<a href="javascript:;" onclick='document.video1.stop()'>Stop video1</a>
<a href="javascript:;" onclick='document.video1.fullscreen()'>Fullscreen</a>
</body>
</html>
Other useful sources/links:
http://www.videolan.org/doc/play-howto/en/ch04.html
http://www.w3.org/2010/05/video/mediaevents.html
I want to know how can one actually use a .svg file In a web page?
See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).
There are many ways to include an existing svg file:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).
The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
The img fallback is only loaded and used if the browser doesn't understand SVG.
I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.
<html>
<body>
<svg></svg>
</body>
</html>
It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.
If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
This technique is supported by all browsers except IE8 and below as well as the android 2.3 browser and below.
Read the chapter inline SVG for further details:
css-tricks.com Using SVG
developer.mozilla.org SVG In HTML Introduction
If you dont want to put it inline in your page then the best alternative seems to be the object tag and avoid using the embed tag.
Read this for further details about object vs embed vs img tag:
How to Add Scalable Vector Graphics to Your Web Page
http://www.w3schools.com/svg/svg_inhtml.asp
The best example:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!
Also supports most browsers, including IE
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome,
Opera, and Safari you can
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
(end of quote)
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )
I have a site that creates images for some bit of content after the content is created. I'm trying to figure out what to do in between the time the content is created and the image is created. My thought is that I might be able to set a custom image to display on a 404 error on the original image. However, I'm not sure how to do this with lighttpd. Any ideas or alternatives?
EDIT: The issue is the user isn't the one creating the content, it's being created by a process. Basically we are adding items to a catalog and we want to create a standardized catalog image from an image supplied by the product provider. However, I don't want a slow server on the provider end to slow down the addition of new products. So a separate process goes through and creates the image later, where available. I guess I could have the system create a default image when we create the product and then overwrite it later when we create the image from the provider supplied image.
Another alternative on the client side is to do:
<img src="/images/generated_image_xyz.png"
onerror="this.src='/images/default_image.png'; this.title='Loading...';" />
Use the <object> tag in HTML with a fallback to the default image.
<P> <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
</P>
(Example from w3.org)
As I understand your problem: You want to show an intermediate image until the real image has been generated?
You could display a loading image and use AJAX to change that DOM node into the real image when it's been created. You could write it from scratch or use any of the well known and stable AJAX libraries out there, if you have no preference of your own take a look at jQuery.
Further to #kentlarsson - if you want to do it via Javascript, I recently found this code:
http://jquery.com/plugins/project/Preload and the demo at http://demos.flesler.com/jquery/preload/placeholder/ which does as he suggests - with its 'notFound' option.
I don't know enough about lighttpd to tell you about setting up a custom image with one or more subdirectories in a site though.
I think you could probably solve this on the client side alone.
Based on Jaspers' answer, you could do:
<OBJECT data="/images/generated_image_xyz.png" type="image/png">
Loading..<blink>.</blink>
</OBJECT>
Also layering backgrounds using CSS you could do:
<style type="text/css">
.content_image { width:100px; height: 100px;
background: transparent url('/images/default_image.png') no-repeat }
.content_image div { width:100px; height: 100px; }
</style>
<div class="content_image">
<div style="background:
transparent url('/images/generated_image_xyz.png') no-repeat" />
</div>
The latter solution assumes you don't have any transparency in your generated image.