I have initialised the element using:
$('video').mediaelementplayer();
Now I would like to target that video and pause it when a link is pressed:
$('.page_button').live('click', function() {
$('video').pause();
});
Thanks.
Each element with a media player element has a player property defined. This is where all the methods reside. You can access it with either of the following methods:
$('video')[0].player.pause(); // Be sure the video element exists.
$('video').each(function(){this.player.pause()}) // Safe.
Related
Please see this https://jsfiddle.net/vpLbvp0o/17/ for an example of what my issue is.
I am trying to create audio elements dynamically, layering music on the html page. Here is what I am doing when creating a new audio element and playing the music:
const new_layer = document.createElement("audio");
new_layer.id = "hello";
new_layer.src = "some_sound.mp3";
new_layer.play();
This works and the music starts to play. Later, if I want to reference this same element using its id that I have set to pause the music or update the src, using document.getElementById("hello") returns null. The element cannot be found, but the music is still obviously playing in the DOM. How do I reference this element that I have obviously created and is still there? In the jsfiddle, you can see that I am waiting with a timeout before trying to retrieve the element, but it seems like it's just not there.
If I do the same thing with an element that was already defined in the HTML document, then everything works fine. Is this a limitation of dynamically creating elements using JavaScript?
The node isn't in the DOM, you need to add it.
document.body.appendChild(new_layer);
document.getElementById gets element with specified id from document, and you did not append it to the document
const player = document.createElement("AUDIO");
player.setAttribute("id", "hello");
player.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
player.play();
console.log(player.id);
console.log(player);
document.body.appendChild(player);
let get_player;
let audio_list;
setTimeout(function() {
get_player = document.getElementById("hello");
audio_list = document.getElementsByTagName("audio");
console.log(get_player);
console.log(audio_list);
}, 1000);
// Try pausing and playing the audio element. It does not work.
setTimeout(function() { get_player.pause(); }, 5000);
setTimeout(function() { get_player.play(); }, 10000);
<audio id="ambient"></audio>
<audio id="background"></audio>
In a cordova project, i use the camera plugin. In browser, it creates a video element within a div with class cordova-camera-capture.
Due to the css framework I use (FrameWork7), this div is invisible and I'm unable to take the webcam picture.
So i decided to move the div in my view (in a div with ID capture).
Here is my code:
$(document).on('DOMNodeInserted', function(e) {
var element = e.target;
if ( $(element).is('div.cordova-camera-capture') && !$(element).parent().is('div#capture') ) {
$('#capture').append(element);
}
});
It works, but the video is stopped. I can see the webcam capture but on the console I encounter:
Uncaught (in promise) DOMException: The play() request was interrupted
by a call to pause().
I can fix the fact the video is pause by relaunching it:
$('#capture').find('video').get(0).play();
But I don't find it a convenient way as it doesn't get rid off the primary error.
Is there any way to prevent the pause() call on "moving" the div by appending it? Or any technique to move the element without triggering pause()?
Use autoplay attribute
<video autoplay>
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');
I have the following audio tag:
<audio preload>
<source src='/sounds/notify.ogg' type='audio/ogg'>
</audio>
I want to play it through js, so naturally I would expect calling $("audio").play() to do it (it's the only audio tag on the page), but I get an error stating play isn't defined. Upon inspecting it that is the case. The audio element has no play property. Every tutorial or resource I read says this is all you need to do, but... well, I just can't do it. Is my version of FF just broken or am I somehow missing something not stated in these various texts?
play() is a DOM method, not a jQuery method, which means that you'll need to get the actual DOM element before being able to get the play property. To get the actual DOM element, you can use the jQuery get() method:
$('audio').get(/*insert element index*/).play();
or simply use array indices:
$('audio')[/*insert element index*/].play();
And for even more choice, you can do something like this:
$('audio').eq(/*insert element index*/).prop('play')();
You could even do something like this to play each audio element:
$('audio').each(function () { this.play(); });
As Qantas mentioned play is not a jQuery method, but you can easily add it if desired as below:
$.fn.play = function() {
return this.each(function() {
this.play();
});
}
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.