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.
Related
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>
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();
});
}
Huge WTF that I thought was a bug hidden in the semicomplex web app that I'm making, but I have pared it down to the simplest code possible, and it is still replicable in Firefox, Chrome, and Safari, unpredictably but more than 1/2 of the time.
http://jsfiddle.net/cDpV9/7/
var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>");
$("#player").append(v);
Add a video element.
Video starts to load and play.
Video audio sounds like it is doubled.
Pause the visible video, and one audio track continues.
Delete the video element; the ghost audio keeps playing.
Delete the frame, and the ghost audio stops (though once in Firefox it continued to play after closing the window, and didn't stop until quitting Firefox).
Here is a screen capture to maybe show that I'm not completely crazy: http://www.youtube.com/watch?v=hLYrakKagRY
It doesn't seem to happen when making the element with .html() instead of .append(), so that's my only clue: http://jsfiddle.net/cDpV9/6/
$("#player").html("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>");
I'm on OS X 10.6.7.
I think that I have it. Even just creating the JQuery object without adding it to the page causes the ghost player to play: http://jsfiddle.net/cDpV9/8/
var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-banjo-360.webm' autobuffer='auto' preload autoplay controls></video>");
For now I can work around this by using .html(). I'll report the issue to JQuery.
Maybe jQuery caches the content of $() before appending it to your player div? So there is another instance of the video tag. It could be an error in jQuery. Have you tried this without Jquery/js?
I would try adding the autoplay attribute after you append the video player. This should then instantiate the play function.
That would be something like this:
var v = $("<video id='v' src='videofile.webm' autobuffer='auto' preload controls></video>");
$("#player").append(v);
v.attr('autoplay','autoplay');
When you create elements in JavaScript i.e. image elements, objects etc, they are loaded instantly and stored in memory as objects. That is why you can preload images before you load a page. It is therefore not a jQuery bug.
Ref: http://www.w3.org/TR/html5/video.html#attr-media-autoplay
When present, the user agent (as described in the algorithm described
herein) will automatically begin playback of the media resource as
soon as it can do so without stopping.
I've got the same problem over here. This seems to be an issue with using the "autoplay" attribute on your video markup.
Remove the autoplay attribute
append your video DOMNode to any node
if you want autoplay behavior, call videodomnode.play() - using jquery this would be $('video')[0].play()
You could get the html of #player and append the video your self, then add the total with .html() like this:
var v = $("#player").html() + "<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>";
$("#player").html(v);
It's not as good as the .append() function, but if the .append() doesn't work, you might be forced to do something like this.
This one worked best in my case:
var v = '<audio hidden name="media"><source src="text.mp3"><\/audio>';
$('#player').append(v);
$("audio")[$('audio').size()-1].play();
I solved mine by loading video after dom loaded:
$(window).bind("load", function() {
var v = $("<video id='bgvid' loop muted>
<source src='/blabla.mp4' type='video/mp4'>
</source>
</video>");
$(".video-container").append(v);
v.attr('autoplay','autoplay');
});
I am using the HTML 5 "Video" tag to show the video on my page with the "Loop" feature or attribute.
Is there any way we can add a delay or gap between video using the "Loop" attribute??
<video id="myVideo" autoplay loop src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">
Please refer the link to see the Video tag code > "http://jsfiddle.net/nrf5fbh8/1/"
Please suggest!
Updated my code, my video tag DO NOT have controls.
Thanks!
Expanding on my comment above, basically instead of using the loop attribute you can set up a listener and place a function within the listener to replay the video after a specified amount of time(in milliseconds) once the video has ended. The JS would look like this:
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
console.log('ended');
setTimeout(function(){
document.getElementById('myVideo').play();
}, 5000);
}
Updated Fiddle