How do I create a text hyperlink to an mp3 file without showing the player. For example, if I have the word "play" on my site and it is clicked, the associated mp3 will play without leaving the page and without a visible player. Also, when right clicked, the person has an option to save/download the file. The closest example I have found only allows you to copy the link location and not download/save the mp3 file. Thanks.
<!--[ In the head section of the HTML ]-->
<!--audio-->
<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag').play();
}
</script>
<!--/audio-->
<!--[ In the body section of the HTML ]-->
<!--embedded audio-->
<div id="audio">
<audio id="audiotag" src="http://sample.mp3" autobuffer="autobuffer"></audio>
</div>
<!--/embedded audio-->
<!--button/link-->
play
<!--/button/link-->
<!--[ Optional CSS ]-->
div#audio {
display: none;
overflow: hidden;
}
Make the <a> tag point to the mp3 file. When you left-click, use JavaScript to play it. When you right-click, you'll get the built-in menu with a "save link" option.
play
Then in your JavaScript, you can prevent the default action of the link:
<script type="text/javascript">
document.getElementById('audiolink').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('audiotag').play();
});
</script>
The best option would be to use something like SoundManager.
It has a flash fallback for browsers that do not support html5 audio tag.
Demo of normal mp3 pimped up links: play-mp3-links
Related
When I try to use video as a background my website the title and buttons appear at the top of the Youtube video. I want the title, watch and share button removed from the top of the Youtube embed. I've tried everything but nothing works.
I have attached my code. I tried to inject it with jQuery but no luck at all.
<iframe src="https://www.youtube.com/embed/5iNr0Tp13hY?mode=opaque&rel=0&autohide=1&showinfo=0&controls=0&wmode=transparent" frameborder="0" width="100%" height="100%"></iframe>
$('iframe').load(function() {
$('iframe').contents().find("head").append($("<style type='text/css'> .ytp-chrome-top.ytp-show-watch-later-title.ytp-share-button-visible.ytp-show-share-title.ytp-show-cards-title { display: none !important; } </style>"));
});
Instead of using an iFrame, use the jquery.mb.YTPlayer, it's way easier.
Call the .js file to your HTML
<script src="style/js/jquery.mb.YTPlayer.js"></script>
And call the video with
<div id="P1" class="player video-container" data-property="{videoURL:'https://www.youtube.com/watch?XXXXXXX',containment:'#video', autoPlay:true, showControls:false, mute:true, startAt:6, opacity:1, loop:1}"></div>
showControls:false hide the controls, you have all the options in the documentation.
I found the solution; check edit 1 and 2 below
I've read many questions on this matter but most answers say "make sure you load the new video".
You can see my code below and I'm doing this.
What I'm trying to do in this example is have some kind of colored background (the "bg" div) and when its clicked I want to display a video on top. Ultimately what I want to achieve with this is have multiple images on the page and I want to overlay a video on top of everything according to the image tha was clicked. I'm still a noob in html and js so maybe I can't see the obvious.
Here's the code I use to create a red 500x500 background an load the test1.mp4 on top.
This works just fine.
<!DOCTYPE html>
<html>
<head>
<style>
#video{
z-index:1;
}
#bg {
position:absolute;
z-index:-1;
}
</style>
</head>
<body>
<div id="bg" style="background-color:#900;height:500px;width:500px;" ></div>
<div>
<video id="video" width="480" controls>
<source id="vidSrc" src="C:\Users\Biller\test videos\test1.mp4"; type="video/mp4">
Your browser does not support the video tag.
</video>
//the below script creates pause-play controls when I click on the video
<script>
var myVideo=document.getElementById("video");
myVideo.addEventListener('click',function(){
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
});
</script>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="myJQuery.js"> </script>
</body>
</html>
then I use this jquery script (myJQuery.js) to change the video when the red bg is clicked:
$(document).ready(function() {
$("#bg").click(function(){
$("#vidSrc").attr("src","C:\Users\Biller\test videos\test2.mp4");
$("#video")[0].load();
});
});
When I click on the bg the video changes but the new video shows 0:00 on duration and the controls are not working. If I can get this to work I would then hide-unhide the video and change the src url accordingly. I'd appreciate some insight.
edit- I found the problem but I don't know why it's happening: If I put the video I want to change to (in this case 'test2.mp4') in the html directory it works just fine. But if it's anywhere else its not working. As if it cant recognize the path anymore. Any ideas why that may be?
edit2- Ok I found out it has something to do with the backward slash "\". When I replaced that with "/" in the file path, it worked. The "\" works fine when it's in the original html though (I mean when its directly in the video tag as src="C:\users...")
You can find solution here in this post states same issue as yours.
http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag
good luck!
i need a javascript code that would enable me, on a certain button click to let a panel open which contains another page not under my domain for example, www.google.com!
Press Here and upon pressing it, a popup will appear or a panel will become visible that contains Google.com in it!
thanks!
In a function that you bind to the click event for the element you want to click on: Create an iframe and set its src, then append it to an element already in the document.
I'd look into using jquery http://docs.jquery.com/How_jQuery_Works
It's hosted on a CDN so it's easy to include in a document and many browsers will already have it cached decreasing the pages load time.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
jquery is a lightweight javascript library that makes selecting and manipulating page elements REALLY easy.
$("#button").click(function () {
$("#hiddenDiv").slideDown();
});
The hidden div should contain an iframe to display the off-domain page.
http://www.w3schools.com/html/html_iframe.asp
Oh and if you need to dynamically assign the iframe then look into the jquery append function http://api.jquery.com/append/
$('#hiddenDiv').append('<iframe src="http://www.google.co.uk"></iframe>');
This should put you on the right tracks.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_frameDiv').click(function(){
$('#frameDiv').show();
});
});
</script>
<style>
#frameDiv { display: none; }
#frameDiv iframe { width: 100%; height: 600px; }
</style>
</head>
<body>
Show external site
<div id="frameDiv">
<iframe src="http://www.bbc.co.uk">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
This will work only if the site you are trying to display allows frames. Otherwise you may need to open the site in a separate browser window.
use window.Open method like this:
window.open ("www.google.com","mywindow");
see
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
for more details.
I'm trying to figure out how to allow users to click on a Google+ "+1" button from within Flash. From reading through the Google+ docs and examining that their script is doing, I don't see a way and was wondering if anyone's solved this yet.
The problem is that their script creates an iFrame which points at a Google subdomain. So I can't trigger a button click due to cross-domain policy. I can't simply call the same URI that they're calling because it's encoded and their encoding may change. I can't find any documentation on how to programmatically call a +1, etc...
Any ideas?
Google Plus does not have a version of +1 button which can be directly embedded into flash, and the API they have just released is read-only, therefore you can't use methods which normally works for the facebook like button.
What I'd suggest is to have an absolutely positioned DIV tag on top of your flash object which you will invoke when needed, and you can pass the correct URL to "like" using the href parameter. I'm using explicit mode for tag rendering to show how you can dynamically prepare the tag.
Here's some sample code which uses jquery for the animations.
<style type='text/css'>
.gplus-container {
display: none;
position: absolute;
top: 8px;
left: 98px;
}
</style>
<div id="flash-container">
Flash content, click!
</div>
<div class="gplus-container">
<div class="g-plusone" data-href="http://jsfiddle.net" ></div>
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<script type="text/javascript">
$(function(){
$('#flash-container').click(function(){
$('.gplus-container').fadeIn();
gapi.plusone.go();
});
});
</script>
You can also test this sample code on jsfiddle.
Is there a good article or how can have an iframe or frame work asynchronously with every page? I have a bottom/fixed div wrapped in jquery to slide up on hover containing an mp3 player. I referenced the player with an iframe. I renderes fine, but how can it keep playing without a reload on page refresh or navigation to another page? I want it to be fixed at the bottom of every page and play continuously without refresh. I tried putting the iframe in each page, but that still didn't work. Any ideas? Thank you.
If it must stay in the browser ( not downloading an application or read stream in a music/video player ), the only way should be to don't really change page, and load content that must change with ajax or javascript ( or have it itself in a (i)frame ).
But it would be a lot easier to do a page with only the lector and put a link on your website to open it in another tab :
Text or what you want
Edit :
So with javascript it would be the same result than ajax, but that means not changing page so for the SEO if it's somewhat important it's not good.
What I meant by javascript was for example if you click on link "home" just adding dynamically a <script type="text/javascript" src="/homepage.js"></script> wich modify content of the page ( while keeping the mp3 player ).
Otherway, maybe with a cookie if it's possible with the player to know by javascript :
at know to wich mp3 file the player is
at wich time in the mp3 playing the player is
to go at a specified mp3 file
to go at a specified time in an mp3
(and if it is possible to pause the player, there should to be the ability to know if the player is playing or not )
It would be possible when changing page to get at the good time ( but there will be the time to load the page and mp3 player without music ).
Or there could be mp3 player which can save a the time at wich we are, and begin at this time on another page ( but still while changing page no sound for several seconds ).
With these methods there would be too the issue of opening several pages.
Edit :
I tried the way with the content of the page in iframe, it works rather well but needs the membre to switch in the mp3 mode.
Here is mp3.html ( to put in root folder, if it's not possible it would need some changes ) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MP3 Player</title>
<style type="text/css">
html {
font-size: 100%;
}
body {
margin: 0;
padding: 0em;
}
#frame { width: 100%; height: 100%; border: none; }
#player { position: absolute; right: 20px; bottom: 20px; }
</style>
<script type="text/javascript">
if ("onhashchange" in window) {
var h='';
var command= false;
window.onhashchange = function(){
if(location.hash==h) return;
command= true;
window.frames['frame'].location.replace(location.hash.replace(/^#/,""));
h= window.location.hash;
}
}
</script>
</head>
<body>
<iframe id="frame" onLoad="if(this.src=='')return;if(command)command=!1;else window.location.replace(h='#'+window.frames['frame'].location.href.replace(new RegExp('^'+document.location.origin),''));document.title=window.frames['frame'].document.title;"></iframe>
<script type="text/javascript">
document.getElementById("frame").src=document.location.hash.replace(/^#/,"");
</script>
<div id="player">
<object type="application/x-shockwave-flash" data="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3"></object>
remove mp3 player
</div>
</body>
</html>
And to put a link that open the current page in an iframe and with an mp3 player, it only needs a link :
add mp3 player
An example using that here.
Either you have an independent Flash/Java/Unity etc player outside the browser window.
Or, You use frames, two frames, one where the main site pages appear, and one where the player resides.
Other way is making the entire navigation in your site (where you want the player to be continuous) using async calls (Ajax).
Google b.t.w uses iframes/frames