I'm a begginer, and I need your help :)
I have a simple landing page, made from one long jpg + image mapping.
I've embedded a youtube video in a specific location on the image as an object command but I want to show a different image until it is pressed (an image with a play button, for example).
The page will be shown on a facebook tab as well.
Can any1 help me?
P.S - Sorry if I have grammar mistakes :)
Thanks!
Pretty sure a placeholder can be implemented via the Youtube API or you could take a look at this, How to add a splash screen/placeholder image for a YouTube video
Using JavaScript: You could add a Listener to the image so once it is pressed it loads a video.
var image = new Image(); //Image with playbutton
//Then load your Video in the EventListener
image.onclick("load", function() {
alert("loaded");
The function() method will contain the code to run your video
This is a good link about EventListeners http://idratherbewriting.com/javascript/events-and-listeners-javascript/
Related
I have written code for playing youtube videos in webbrowser.
Xaml code:
<phone:WebBrowser x:Name="webBrowser" Height="411" IsScriptEnabled="True" Margin="10,100,78,0" />
Xaml.cs code:
Movie movie;
public VideoPage()
{
InitializeComponent();
var app = App.Current as App;
movie = app.selectedMovie;
string video =movie.MovieWatchLink;
this.webBrowser.Navigate(new Uri(video));
}
When I run this code at first white color PhotoFrame is displaying as shown in below figure.
And when we tap it.Movie starts playing in nativeplayer.And when we want to move back to movies list also this photoframe is displaying.
Please anybody help me how can I remove this.I searched my level best eventhough I didnt get any solution. Please help me how can I immediately play after selecting the movie.
ManyThanks in Advance
You can try collapsing the visibility of the webBrowser until the video starts streaming in the native player if we can get any handle of media being played in our code.or else you can try showing a thumbnail image related to the video until it starts to stream in player.
Showing thumbnail will be a better choice.
Regards,
Ganesan S
I am building a browser songs personalized application. I am in the starting phase of the application where I want to click a button and change the song currently being played by the audio player in HTML5. I wanted to know how can I change the source of the audio. I tried using a ajax call when the button is clicked and then the following commands
var audio= document.getElementById("myplayer");
audio.src="E:/My Collection/abcd.mp3";
But this doesn't work and the same audio song continues. Can anyone help me with this. Thank You.
Take the list of your audio file in an array.
var audioArr = new Array();
audioArr = ["abc.mp3", "xyz.mp3"];
And, then onclick() of button you can pass index. Eg:
audio.src = audioArr[index];
I hope this works :)
in addition to what Bhavya said about array, add audio.load(); or audio.play(); after changing the src. it would make the audio tag reload.
Three part question...
I'm using http://syddev.com/jquery.videoBG/index.html for HTML 5 video background on my site. Works perfectly! However I have some additional functions I want to add on but not quite sure how to pull it off.
1_ I would like to add a button to mute/unmute audio. I'm not that great at jquery so what I'm looking for is what I need to add to the existing code to make it happen and what I need to put in the place where I want the actual button to go. I'm guessing I need to add some mute option to...
$('.bg').videoBG({
position:"fixed",
zIndex:0,
mp4:'_video/ClimbBG.mp4',
ogv:'_video/ClimbBG.ogv',
webm:'_video/ClimbBG.webm',
poster:'_images/ClimbBG.jpg',
opacity:1,
fullscreen:true,
});
Then some function/code in the spot I want the button to be?
2_ I would like to have a different random video load each time the site is loaded. Maybe even have a new video play after the first one is finished?
Example...This site loads a different video when the page is refreshed ( cabin-time.com )
3_ Not super important but I've noticed a lot of people who use video backgrounds have little dots in the video (cabin-time.con is one example). I'm guessing this is to reduce file size? Most likely done in Final Cut? How do I add this into my video and does it really reduce file size?
Thanks!!!
Unfortunately, VideoBG does not support mute, so you can't just 'add mute option' to it, you'll need to make it yourself.
Here are some points to get you started, edit the videoBG.js, to add a 'muted' attribute ( http://syddev.com/jquery.videoBG/jquery.videoBG.js )
......
// video element
var $video = $('<video/>');
$video.css('position','absolute')
.css('z-index',options.zIndex)
.attr('poster',options.poster)
.attr('muted',options.muted)
.css('top',0)
.css('left',0)
.css('min-width','100%')
.css('min-height','100%');
.......
// these are the defaults
$.fn.videoBG.defaults = {
mp4:'',
ogv:'',
webm:'',
poster:'',
autoplay:true,
loop:5,
sclae:false,
position:"absolute",
opacity:1,
textReplacement:false,
zIndex:0,
width:0,
height:0,
muted:false
Now you can add muted:true to your properties
I am trying to embed a flash movie (.flv) into a webpage with a transparent background.
Requirements:
- Flv runs in transparent mode - I must be able to view html contents below.
- Movie does not auto play
- Movie is contained in a div and positionend absolutely using CSS
- No video controls or overlays, you shouldn't know it's an flv
- On load Movie is hidden
- Using jQuery, I click an image link to show and play the video, clicking it again stops and hides the video - vice versa
I have tried using Longtail Video Player with swfobject.js and javascript controls but no joy. Video is not transparent and controls with a click to play still feature.
Am I overcomplicating what appears to be quite a simple task.
I happy to explore any implementation.
Adobe flash embed parameters have been set correctly and wmode = transparent.
Any help would be greatly appreciated.
Cheers
Paul
This will get you a transparent overlay in flash. Its a pretty good set of code.
http://code.google.com/p/swfobject/
SWFObject Examples
The example given above is what you need for the bare bones use of SWFObject, but what if you want to use some of the other parameters the Flash plug-in has to offer? SWFObject makes it very easy to add any extra parameter you may need. The examples below are a number of different methods you may wish to use to embed your Flash content.
A simple example adding a few extra parameters
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
<div id="flashcontent"><!--put a place holder image in here.--></div>
http://blog.deconcept.com/swfobject/
EDIT:
THANKS TO Unreality: There has been an update in the code library you can now access it here: http://www.code.google.com/p/swfobject
I am new to Flash.
I am using Adobe Flash CS3 to create simple animations (images moving between keyframes).
It produces a SWF file that I put on a website.
I want the SWF file to be a link to a URL. How do you do that?
Thank you in advanced!
The same answer using AS3:
in the 1st frame that the invisible button appears, you should paste the following code:
myButton.addEventListener(MouseEvent.CLICK, linkToPage);
function linkToPage(e:MouseEvent):void{
var request:URLRequest = new URLRequest("your page here");
navigateToURL(request);
}
You should name the button instance 'myButton' (in the properties bar - the bottom-left input dialog). That should do the trick.
1st you have to create an invisible button. An invisible button is a button with only the HIT frame. Create a button that covers all your stage. It will appear in your stage as a blue-transparent shape. Just click it and press F9 to bring the 'actions' window.
After that, just paste the following code into the window:
on(release){
getUrl("here you put your url");
}
After that, just compile your code as AS2. I think that's the easiest way of doing this.