How to remove a muted attribute in a website? - javascript

Here iam opening a website which has several videos and all videos when playing are set by default to muted in the video tag.Example is given here
<video id="pbotplayer_html5_api" class="vjs-tech" poster="https://somename_1.jpg" muted="" preload="auto" autoplay="" loop="" src="https://somename_1.mp4" __idm_id__="-1787736063" controls=""><source src="https://somename_1.mp4" type="video/mp4"><p class="vjs-no-js"></a></p></video>
From this we can clearly see that the muted attribute is enabled by default and iam visiting this website in chrome.And i have even disabled Flash player in chrome://plugins but it does not work.
So all i wanted is to remove this muted attribute when ever a new video form this plays and there are large number of videos in this site and it is not easy to increase slide each time.
Here iam attaching how the controls look like.
We can see that the volume slider is 0 and each and every time we need to increase the slider,but manually it is difficult.
So any solution to this problem either by writing an script which runs everytime the webpage loads new video and it removes the muted attribute.

try with the following:
$("#video-id").removeAttr("muted");
this will remove the muted attribute of the targeted video, but you will need to run this code everytime you update it.

Related

How can i overlay audio with video?

So i wanted to overlay 2 files so they played together using html video controls , this is because the file it too large to fit in one whole bit . I wanted to add two videos , one with audio but a black screen and one with video but no audio and overlay.
I tried
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
but it doesn't actually play them together on further testing.
does anyone know how i could link them together so that when it pause both of the files pause, unpause and can be skipped to a certain timestamp. I am unsure if this is accomplish and if it is possible using java-script, can you please show me how!
Adding several audio and video elements to the same page is no problem and controlling them with one set of controls again achievable, so this could mean when the user pressed play they would all trigger to start play.
However, even if the play button for all is pressed at the exact same time they would not be in sync, elements would ultimately start at slightly different times (buffer, pre-loads etc) and I think it would be this part that would make the idea of overlaying video with audio and playing them in sync a non starter from the outset.

How to make HTML audio tag work in Opera?

i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.

Changing source of video not persistent (mobile website)

I want to use autoplaying videos on a mobile-only website.
So I am forced by some certain restrictions within google chrome (android app).
Then I want to programmatically change the source of the video to a different one.
(I tried two different aproaches, which both only work 50%)
V1:
This is the html I want to change:
<video id="overlayVideo" autoplay muted loop>
<source id="overlayVideoSrc" type="video/mp4"/>
</video>
This is my current code to change the source:
var $newVideo = $("<source>", {id: "overlayVideoSrc", "src": "index/RES/newVideo.mp4"});
$("#overlayVideoSrc").remove();
$("#overlayVideo").append($newVideo);
This plays the video on both mobile, and desktop, but doesnt change the source whatsoever. The video that plays is always the one, I selected in the first place.
V2:
Also tried:
<video id="overlayVideo" src="" autoplay muted loop></video>
Then I used the following:
$("#overlayVideo").attr("src", "index/RES/newVideo.mp4");
This changes and plays the video on desktop, but doesn't on mobile (changes but no playing)
I hope that you are able to follow, if there are any questions, please ask. I am really stuck.
After changing the src attribute
$("#overlayVideo").attr("src", "index/RES/newVideo.mp4");
You need to re-load(update after every change) and play the video:
$("#overlayVideo").load();
$("#overlayVideo").play();

Is there a way to prevent Andorid/iOS taking control over a video played inline on my website

I have a video on my website that I need to keep "locked" (visitors shouldn't be able to play/pause/forward).
I noticed that if I flip my phone the video goes full-screen and the OS takes control of it (it's no longer played by the inline html player, but instead is played by the OS player).
Any way to prevent that?
<video playsinline webkit-playsinline>
...
</video>
PS: I tried the playsinline attribute, but it didn't seem to work. At least not on the devices I tested.

Unable to pause videojs on load if autoplay is enabled

this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).

Categories