I am trying to figure out a way to have a static image appear were the video will be when a visitor first comes to my webpage. I would like to have a graphic button that if clicked will trigger the video to play. This graphic would be elswere on the page not in or on top of the video. So, I guess I am looking for how to do 2 things.
Play an html5 video by clicking a graphic elswere on the page
When that video is played it should swap out the static graphic version for the active video version. Ideally, once played the static version would replace the video and be reset to play again.
Any help with this would be greatly appreciated. Thanks!
This should do the trick, just make sure to point 'video' and 'image' to their respective URLs.
<script>
function doVideo()
{
var video = "myvideo.mp4";
document.getElementById("videoimgdiv").innerHTML = "<video autoplay onended=\"doImage()\"><source src=\"" + video + "\"\></video>";
}
function doImage()
{
var image = "http://us.123rf.com/400wm/400/400/podlesnova/podlesnova0906/podlesnova090600034/5117393-small-red-furry-kitten-with-blue-eyes.jpg";
document.getElementById("videoimgdiv").innerHTML = "<img onclick=\"doVideo()\" src=\"" + image + "\"/>";
}
</script>
<div id="videoimgdiv">
<img onclick="doVideo()"src="http://us.123rf.com/400wm/400/400/podlesnova/podlesnova0906/podlesnova090600034/5117393-small-red-furry-kitten-with-blue-eyes.jpg" />
</div>
Related
First time I view the page with an animated .gif it plays fine on page load (lasts about 2 secs).
On refresh (F5), the .gif no longer plays and only the last frame of gif animation is shown.
Is there anything I can do do to make sure it plays everytime?
For the PHP the much better option then using date("Ymdgis"); is using time(), like this:
<img src="picturePath.gif?<?php echo time();?>" />
Strange behavior that's affects every browser..
I usually refresh it manually with this script (it uses jQuery)
<img id="gif_animata" src="picturePath.gif">
<script type="text/javascript">
var gifSource = $('#gif_animata').attr('src'); //get the source in the var
$('#gif_animata').attr('src', ""); //erase the source
$('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-)
</script>
This will refresh the src of the image adding the current date, so the browser will re-load it, thinking that's a new image.
Otherwise in PHP way (I prefer this one):
<img src="picturePath.gif?<?php echo date("Ymdgis");?>" />
//for the browser it will seems that's a new picture!
<img src="picturePath.gif?2012092011207">
The workaround that works for me for this issue is to reload the GIF manually using Javascript
GIF implemented on CSS (background-images)
var element = document.getElementById(name);
element.style.backgroundImage = "none";
element.style.backgroundImage = "url(imagepath.gif?"+new Date().getTime()+")";
GIF implemented on HTML (img tag)
var element = document.getElementById(name);
element.src = "";
element.src = "imagepath.gif?"+new Date().getTime();
Thanks to #sekmo
This works, only requires one line below it and I suggest not filling the <img> src attribute at first so the page doesn't try to load any unnecessary resources.
<img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a="+Math.random()</script>
It could be that your browser is just showing the cached version. Try holding shift and refreshing, and see if it works.
I hid control panel of video on mobile using this "video::-webkit-media-controls-panel{display:none}" in responsive.css because it occupy the height of video.
But I want to show the control panel when user click the video screen.
How can I make it? Any help would be appreciated.
than you
Rather than use the shadow DOM, have you tried making controls visible or not - in this instance they're hidden by default but get shows when the user clicks and hidden when the user mouses out (could trigger on a click elsewhere, or when the video starts playing for instance)
<video width="400" controls id="video" onclick="mox(true);" onmouseout="mox(false);">
<source src="bigbuck.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
// get the video element
var video = document.getElementById("video");
// attach a listener to hide controls when video starts playing
// note: you probably want some more logic to make this a more usable experience
video.addEventListener('playing', mox(false),false);
// hides the controls
mox(false)
function mox(s) {
if (s) {
video.controls = "controls";
} else {
video.controls = "";
}
}
</script>
I'm adding videos to a very specific website made with Wordpress. I have to control carefully each visual element and behaviour of this page wich is devoted to arts (And because of this, I must be very careful of resultns)
Well, I create a new Wordpress page and add the following code:
<video width="480" height="360" controls class="size-full wp-image-19 aligncenter">
<source src="http://URL_OF_MY VIDEO">
</video>
And everything goes on. The videos are hosted on the website server. I'm usign a 4:3 video.
But, when I select the fullsize option, the video wich is 4:3 shows in the screen midst without making the background be darker or black. Thus, we have a bad result consisting in a messy composition, ugly and far from my objective.
How could I add code to this html to archive this? Make the background darker while playing my video on fullscreen (if it's 4:3, it will left side spaces in a 16:9 screen)
EDIT:
I've tried to add this code to functions.php on the wordpress core.
//[myjavascript]
// Php function that executes javascript when a shortcode is called. Added to
//funcions.php
function myjavascript_func( $atts ){
return "<script>
document.getElementById("my_vid").addEventListener('play', lowLights, false);
function lowLights() {
this.removeEventListener('play', lowLights, false);
document.getElementById("videobox").style.backgroundColor="black";
</script>";
}
add_shortcode( 'myjavascript', 'myjavascript_func' );
But as a result, when I call this function via the shortcode [myjavascript], I obtain this error message: Parse error: syntax error, unexpected T_STRING
I presume that could be because of the references to Id's.
What could be wrong?
You can use something like this:
<div id="videobox">
<video id="my_vid">
<source src="your-video-here.mp4">
</source>
</video>
</div>
then some JS:
<script>
document.getElementById("my_vid").addEventListener('play', lowLights, false);
function lowLights() {
this.removeEventListener('play', lowLights, false);
document.getElementById("videobox").style.backgroundColor="black";
}
</script>
I am trying to show the poster image once the video ends and here is the code. However the poster image is not showing up. Any clues why this is not happening?
The ideal steps would be
1. Pause video
2. Init at first frame
3. Remove default controls
4. Show poster image.
Code:
document.getElementById("video1").addEventListener("ended", function () {
document.getElementById("video1").pause();
document.getElementById("video1").currentTime = 0;
document.getElementById("video1").removeAttribute("controls");
document.getElementById("video1").setAttribute("poster", "graphic.jpg");
});
Try this one:
document.getElementById("video1").addEventListener("ended", function () {
this.load()
});
I've got a web page that automatically reloads every few seconds and displays a different random image. When it reloads, however, there is a blank page for a second, then the image slowly loads. I'd like to continue to show the original page until the next page is loaded into the browser's memory and then display it all at once so that it looks like a seamless slideshow. Is there a way to do this?
is the only thing changing the image? if so it might be more efficient to use something like the cycle plugin for jQuery instead of reloading your whole page.
http://malsup.com/jquery/cycle/
Here is the JS needed if you used jQuery -
Say this was your HTML:
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
Here would be the needed jQuery:
$(function(){
$('div.pics').cycle();
});
no need to worry about different browsers- complete cross browser compatibility.
If you're just changing the image, then I'd suggest not reloading the page at all, and using some javascript to just change the image. This may be what the jquery cycle plugin does for you.
At any rate, here's a simple example
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
function changeImage(){
document.getElementById('myImage').src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
setTimeout(changeImage, 5000);
};
setTimeout(changeImage, 5000);
</script>
This changes the image source every 5 seconds. Unfortunately, the browser will download the image progressively, so you'll get a "flicker" (or maybe a white space) for a few seconds while the new image downloads.
To get around this, you can "preload" the image. This is done by creating a new temporary image which isn't displayed on the screen. Once that image loads, you set the real image to the same source as the "preload", so the browser will pull the image out of it's cache, and it will appear instantly. You'd do it like this:
<img id="myImage" src="http://someserver/1.jpg" />
<script language="javascript">
var imageList = ["2.jpg", "3.jpg", "4.jpg"];
var listIndex = 0;
var preloadImage = new Image();
// when the fake image finishes loading, change the real image
function changeImage(){
document.getElementById('myImage').src = preloadImage.src;
setTimeout(preChangeImage, 5000);
};
preloadImage.onload = changeImage;
function preChangeImage(){
// tell our fake image to change it's source
preloadImage.src = imageList[listIndex++];
if(listIndex > imageList.length)
listIndex = 0; // cycle around again.
};
setTimeout(preChangeImage, 5000);
</script>
That's quite complicated, but I'll leave it as an exercise to the reader to put all the pieces together (and hopefully say "AHA!") :-)
If you create two divs that overlap in the image area, you can load one with a new image via AJAX, hide the current div and display the one with the new image and you won't have a web page refresh to cause a the "bad transition". Then repeat the process.
If there's only a small number of images and they're always displayed in the same order, you can simply create an animated GIF.
Back in the dark old days (2002) I handled this kind of situation by having an invisible iframe. I'd load content into it and in the body.onload() method I would then put the content where it needed to go.
Pre-AJAX that was a pretty good solution.
I'm just mentioning this for completeness. I'm not recommending it but it's worth noting that Ajax is not a prerequisite.
That being said, in your case where you're simply cycling an image, use Ajax or something like the jQuery cycle plug-in to cycle through images dynamically without reloading the entire page.