I have a code like this
<script type="text/javascript" src="http://www.clipul.com/play/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://montsmile.com/jwplayer/player.swf','mpl','480','380','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','310');
so.addVariable('width','470');
so.addVariable('file','http://localhost:81/newtip/<?=$videopath1?>');
so.addVariable('logo','http://localhost:81/newtip/ffmpeg/logo2.jpg');
so.addVariable("ClickURL", "http://www.google.com");
so.addVariable('captions','/upload/corrie.xml');
so.addVariable('link','<?=$full_url.'tip.php?vid='.$row_video['vid']?>');
so.addVariable('linkfromdisplay','true');
so.addVariable('linktarget','_blank');
so.addVariable('searchbar','false');
so.addVariable('skin','http://montsmile.com/jwplayer/player.swf');
so.write('player');
</script>
It is displaying a player and playing the video. If I Click on the Logo It has to go to www.google.com. But when I click on the logo it becomes pause.
Help me how to add clickable Logo on the player
Simply add the following line to your embed code:
so.addVariable('logo.link','http://www.google.com/');
Best,
Zach
Developer, LongTail Video
Related
I am looking for a method to add a java script file to a button or image within Wordpress. The script works fine and opens a screen to be subscribed to a newsletter. But I want this screen only to appear when button or image is clicked. Is there a way to do it?
Here is the script
<!-- Laposta 1.1 -->
<script type="text/javascript">
var Laposta = {};
Laposta.width = '200';
</script>
<script type="text/javascript" src="subscribe.js"></script>
<!-- /Laposta -->
Any suggestions are greatly appreciated
could someone help me in finding a way to play an mp3 audio file by touching an image on a touch screen with HTML-CSS-JavaScript?
Thank you!
<!DOCTYPE HTML>
<html>
<head>
<title>audio with image</title>
</head>
<body>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<img src="http://www.partyplan123.com/wp-content/uploads/2015/02/click-here.jpg" onclick="play()">
<audio id="audio" src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" ></audio>
</body>
</html>
To play an audio file in HTML, use the <audio></audio> tag.
This tag also comes with <audio controls> attribute, to add controls like play pause and all.
For a full DOM documentation on this tag go to the W3 audio tag docs
As for the JS side, use the onclick() event for triggering the audio file on touch.
Create an audio element in your html and hide it using visibility: hidden.
When the user clicks on the image, handle the click event with Javascript and trigger play on the audio element manually from the handler.
You can refer here for more documentation on audio html api's.
Here's the best way. This is not inline Javascript so complies to Content Security Policies (CSP's) so if you port to android .apk or to a chromium app, you won't have issues. This is not my code obviously, its from Steven Park on teamtreehouse:
The first way using Jquery:
const rollSound = new Audio("./assets/audio/ONEDICE.WAV");
$('#dice-button').click(e => rollSound.play());
Create a a div with the #div-button name, and also another example a version that is not JQuery:
const rollSound = new Audio("./assets/audio/ONEDICE.WAV");
document.getElementById('dice-button').addEventListener("click", e =>
rollSound.play());
You can find it here:
https://teamtreehouse.com/community/how-do-i-add-a-sound-when-a-button-is-clicked-jquery
However I have cut and paste it because it took me hours to find that solution after searching for something that fills my needs.
I am working on this code from the last 2 days. I tried many solutions but i am not able to achieve what i want.
this is my code
<html>
<body>
Click me!
Click me!
<div id="0HTo_ySoct4">The text will get loaded here</div>
<div id="PxWDfisVmzg">The text will get loaded here</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';
$('.player').hide();
$("#"+yout).html(myurl);
}
</script>
</body>
</html>
Let me explain what i want and what the code is doing.
See, i have 2 click me tab. i can have more click me tab around 20, well it depends on the results.
All tab contains a youtube video id.
so when i click on any click me tab to play the video. The video will get loaded in their related div. This is indeed. i want to load each video just below their particular video description / details. Its working but with a bug.
The bug is, when i tried to click on the 2nd click me tab. The first one will get hide from the webpage but the video will still play in the background and you will listen audio of both video's.
I want to completely close the previous video before playing the next one.
I did many changes but did not get it fixed so now i need little help from you expert guys.
please help me.
How can i completely close all the last videos before playing the next one ?
Just because div id is different i am having this issue but i need that in my project.
Thanks in advance,
Do something like this
<html>
<body>
Click me!
Click me!
<div class="youtubeVideo" id="0HTo_ySoct4">The text will get loaded here</div>
<div class="youtubeVideo" id="PxWDfisVmzg">The text will get loaded here</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';
$('.player').hide();
$(".youtubeVideo").empty();
$("#"+yout).html(myurl);
}
</script>
</body>
</html>
basically empty all the divs showing the video before loading the new one in its corresponding div
How can I go about making a sound clip play when an element is hovered over?
I'm using the latest Wordpress, and the parent theme I am using gives me an option to paste scripts which it will embed to the <head> section.
Is there a script which I can just add to my <head> that will play the sound when the cursor moves over my menu item class .menu li?
I spent several hours trying to figure this out the other day with no avail. I've done this before in a simple HTML website:
<head>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<li><span>Home</span></li>
Not sure how to deploy this on Wordpress though.
I want to "preload" the start page of my website with a little gif-animation. Its a 3-frame-piece and I want to show it right before the first page. Are there plugins to preload a page with a specific animation shown?
You don't need a plugin, or even jQuery. Just assign the image to a variable in the <script> block in the <head> of your page. JavaScript prevents the content from loading until it has done it's job, so the image will already be cached by the page visitor when the HTML is rendered:
<head>
<script>
var animation = new Image();
animation.src = "images/animation.gif";
</script>
</head>
<body>
<div>
<img src="images/animation.gif" alt="oooh! lookee!"/>
</div>
</body>