Custom Mute Button for Audio Embedding? - javascript

I'm trying to set up a custom mute button for the embed tag.
<embed src="intro.mp3" autostart="true" hidden="true" loop="false">
Is there a way to do this via JS?
This worked for the audio tag:
document.getElementById('audio').muted = true;

Nope, there is no muted attribute for embed elements. If you want control over the volume you'll need to use the audio element or a proprietary plugin that you can pass parameters to.

This is obviously an old question, but I had a similar issue... probably not the best solution, but I just placed the embed in a div and removed that div on the 'mutebutton' click, then hid the mute button:
mute
<div id="soundDiv"><embed...></embed></div>
$("#mutebutton").click(function() {
$(this).hide();
var div = document.getElementById("soundDiv");
div.parentNode.removeChild(div);
});
I'm still a noob, so this may not work for you. But it did for me!

Related

How do I get audio to play when I hover over an image?

I'am a complete beginner in coding I was just practicing making a simple prank web page for my nephew (its an inside joke of ours) I know the solution might be easy but I cannot figure it out on account of being a beginner and still learning. I want the audio to play when I hover my mouse on the image and to stop playing when my mouse is out how can I modify my code (given below) to do that?. I tried with the onclick event and it worked. Thank you in advance
</head>
<body>
<script>
function play(){
var audio = document. getElementById("audio")
audio.play();
}
</script>
<img src="moolikeacow.jpg" value="PLAY" onclick="play()">
<audio id="audio" src="rickroll.mp3"></audio>
</body>
I refactored your code a bit. First of all moving the script element to the end of the document to make sure that all elements are loaded before referring to them. Second I made event listeners for both click, mouseover and mouseout events. I also added a function for stopping the audio.
<body>
<img id="img" src="moolikeacow.jpg" />
<audio id="audio" src="rickroll.mp3"></audio>
<script>
var audio = document.getElementById("audio");
var img = document.getElementById("img");
function play() {
audio.play();
}
function stop() {
audio.pause();
}
img.addEventListener('click', play);
img.addEventListener('mouseover', play);
img.addEventListener('mouseout', stop);
</script>
</body>
The First Problem why it doesn't work is that you wrote javaScript top of the html elements as a result javaScript can't grab those elements because those elements are created after javaScript.
Second Problem is You Added The Click event to image so only if you click it will start the audio, not on hover. You should add the mouseover event listener instead of click to make that work.
I just wrote a script that works well as you are looking for and with good comments so you can use or learn how it's working
https://gist.github.com/mmestiyak/93b4ee8952337f7847e3aab4f6521174
You Used Inline Event in Image But There is much more things to do with addEventListener method that comes in every element you grab in javaScript.
You can give a look at MDN to know more about addEventListener
Here you can see the live version: https://h7qym.csb.app/
hover on the image and just wait for some seconds to see the magic
If Any other things to know please let me know, i enjoy help you
try this:
$('a').hover(function(){
PlaySound('mySound');// calling playsound function
},function(){
StopSound('mySound');// calling stopsound function
});
and change your anchor tag like,
Hover Over Me To Play

html 5 video tag is not playing first time clicked in android using JavaScript on browser

I am using an html 5 page
with a video tag and a dynamic source .
any time the user click on the page I assign the source to the video
and play it
<video ></video>
$(div).click(function()
{
$('video').src('filename.mp4');
$('video').get(0).load();
$('video').get(0).play();
});
At the first click nothing happens and at the 2 time the video is playing
What am I missing ??
It seems that you use improperly the jQuery selector for clicking on the div element. The code should be (mark the quotes):
$("div").click(function() {
$('video').src('filename.mp4');
$('video').get(0).load();
$('video').get(0).play();
});
However, it is always better not to use general selector (this will be applied to all div elements), but give your div, which you use for action triggering a CSS class or ID, for example like this:
<div id="my-div-id">Click to play</div>
<video id="my-video-id"> </video>
<script>
$("div#my-div-id").click(function() {
$('video#my-video-id').src('filename.mp4');
$('video#my-video-id').get(0).load();
$('video').get(0).play();
});
</script>

How to mute a looped background video

I am using the Wallpaper plugin to loop a video in the background of a div. The idea is to have a video loop in a background of a div on mute. On hover, the video will have sound.
I couldn't find documentation or ways to mute. Any thoughts? I have tried to mute by adding the lines after the plugin is initialized --
$("video").prop('muted', true);
$("video").attr('muted', 'muted');
I have not seen a reference to the volume of the video in the documentation of the plugin.
However, in an html compliant browser, it can be easily muted by
Asserting the muted property
Setting the volume property to 0
You can do it on the video elements or on the jQuery wrapper.
$('video').prop('volume', 0)
$('video').prop('muted', true)
Since the video elements in your document are created by the wallpaper plugin, you should set the volume or muted property after these have been appended to the DOM. It should not be necessary, but in case of problems you could try setting an event handler for the wallpaper.loaded event.
$('your selector').wallpaper({
//... initialization parameters
}).on('wallpaper.loaded', function(){
$('video', this).prop('muted', true);
});
I would use the property muted="muted" to get the desired result, so long as there's only one video element on the page that will work just fine.
$("video").prop('muted', 'muted');
jsFiddle example
Edit
FYI I checked out the wallpaper plugin and saw that it did indeed do what I suspected which is create a video object. If you really wanted to get specific on what video does what you can use the element that wraps the video then the child video element such as:
$("#pluginElem > video").prop('muted', 'muted');

click a button to load a different video player into div

i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!
You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/
Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.
jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example
thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!

Multiple dynamically added HTML Videos not muting

I have a bunch of html videos being added to the dom via jquery append (HTML string)
I want them to be inserted MUTED.
The problem is, right now they're not getting muted, even when I inject them with the muted prop.
When I remove the muted attrib on the video tag, and try something like $('video').prop("muted",true); it WILL mute them, but only AFTER they have all loaded.
Do I try adding the videos another way, or find an onLoad method for the html videos and trigger a mute function when they're ready.
jsfiddle of what they look like after append: http://jsfiddle.net/mvsMG/
Try onloadeddata HTML5 event handler:
$(document).ready(function(e) { //do NOT use $(window).load; it will not mute all videos
// mute all the videos when data is loaded for each
$('video').on('loadeddata', function(e) {
//console.log('onloadeddata', e.target);
$(this).prop('muted', true);
});
});
Here is the demo fiddle.
Note: I don't know which browser you are testing with but you should check out this browser-support list for HTML5 muted (loop and autoplay) attributes.

Categories

Resources