I got a very annoying problem. I try for a few hours to unmute an HTML5 video with a 'muted' flag, but all that I try doesn't work.
$("#video_background").prop('muted', false);
Sadly, that doesn't work, and removing the muted prop from the code makes nothing, the video stays muted. Is there any solution to force a unmute from the video?
Or can anyone say what I'm making wrong? <section> creates the <video></video> for me, so it uses a few classes. But I searched for a "muted" and no class has it, but the video still has no audio on the website.
And yes.. The videos have sound.
My video has autoplay.
Most browsers block any audio that is played by a web page and is not related to user interaction (see https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide). Maybe that's your problem?
You can unmute your html5 video by unmute attribute also, check this out:-
<video src="any video" **unmute**></video>
Related
I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.
well i'm writing a extension that detects if any tab is playing audio, mutes it and then plays another audio.
however i cant find a way to detect if its playing audio and mute it. any help is greatly appreciated!
Im using manifest v3 btw.
you will see, this speaker symbol, while playing, and if it is muted then speaker cancelled symbol.
I'm so sorry, but I can't get a youtube video to play (https://www.youtube.com/watch?v=SyRv0-oPfKE) inside a video tag.
I know about the iframe API but in this case it has to have the default html5 controls, not the youtube controls.
I probably missed something stupid but can't figure it out...
Anyone know how to do this?
EDIT:
so I tried:
<video
controls='controls'
src={`http://www.youtube.com/get_video_info?&video_id=${id}&asv=3&el=detailpage&hl=en_US`}
type='video/mp4'
/>
and tried:
<video
controls='controls'
src={`https://www.youtube.com/watch?v=SyRv0-oPfKE&html5=1`}
type='video/mp4'
/>
but I get blank page.
The HTML video element expects video files as a source. If you want to play a YouTube video using the native HTML video player, you'll have to provide a link to the video itself, not to the YouTube website for this video.
Also keep in mind, that not all browsers can handle any video formats. See MDN: Media formats for HTML audio and video.
I've always noticed that you can play audio files with the HTML5 <video> tag. It seems really handy, considering that you only have to use 1 element to play videos and audio. An example would be this JSFiddle.
<video src="http://www.w3schools.com/html/horse.mp3" controls></video>
My first question is: Is this something that is here to stay, or is this a fluke that browsers plan on removing later on?
And if not, how do I know if a file is a video or audio using JavaScript? Because if I'm correct, can't .ogg files be video or audio? I'm trying to make a mediaplayer app for Chromebooks but I need to be able to differentiate audios from videos.
Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.
The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.