Develop Reference

how can i mute an iframe on keypress

I have 2 pages, one is a video playing using html video tag
the other is an iframe of the first page.
I want to mute audio in iframe on keypress
The pages are not on the same domain.
this is the code I tried
function cynMute(){
const myElement = document.getElementById("myVideo");
if(myElement.muted === false) {
myElement.muted = true
}
else{
myElement.muted = false
}
}
document.addEventListener("keypress", function(event) {
if (event.keyCode === 13) {
cynMute()
}
});
which works on the first page but it doesn't work when I try to press enter on the second page. I tried putting the code with the respective ids on the second page but still nothing.

From what i understand, you are not able to select the video element inside your iframe. The same function will not work because this time #myVideo is not in the document.
You will have to get your iframe first and the query inside it using contentWindow.
function cynMuteForIframe(){
let iframe = document.getElementById("myFrame");
if(iframe !=null){
const myElement = iframe.contentWindow.document.getElementById("myVideo");
//Rest of your code
if(myElement.muted === false) {
myElement.muted = true
}
else{
myElement.muted = false
}
}

how to open html 5 video fullscreen if it was fullscreen before

I'm watching a series of videos on a website organised in a playlist. Each video is about 2 minutes long.
The website uses HTML 5 video player and it supports auto-play. That is each time a video ends, the next video is loaded and automatically played, which is great.
However, with Fullscreen, even if I fullscreened a video previously, when the next video loads in the playlist, the screen goes back to normal, and I have to click the fullscreen button again....
I've tried writing a simple javascript extension with Tampermonkey to load the video fullscreen automatically.
$(document).ready(function() {
function makefull() {
var vid = $('video')[0]
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
//var vid = $('button.vjs-fullscreen-control').click();
}
makefull()
But I'm getting this error:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
It's extremely annoying to have to manually click fullscreen after each 2 min video. Is there a way I can achieve this in my own browser? I'm using Chrome.

If you can get the list of URL's then you can create your own playlist. The code cannot be accurately tested within a cross-origin <iframe>, for example at plnkr.co. The code can be tested at console at this very document. To test the code, you can use the variable urls at MediaFragmentRecorder and substitute "pause" event for "ended" event at .addEventListener().
If you have no control over the HTML or JavaScript used at the site not sure how to provide any code that will be able to solve the inquiry.
const video = document.createElement("video");
video.controls = true;
video.autoplay = true;
const urls = [
{
src: "/path/to/video/"
}, {
src: "/path/to/video/"
}
];
(async() => {
try {
video.requestFullscreen = video.requestFullscreen
|| video.mozRequestFullscreen
|| video.webkitRequestFullscreen;
let fullScreen = await video.requestFullscreen().catch(e => {throw e});
console.log(fullScreen);
} catch (e) {
console.error(e.message)
}
for (const {src} of urls) {
await new Promise(resolve => {
video.addEventListener("canplay", e => {
video.load();
video.play();
}, {
once: true
});
video.addEventListener("ended", resolve, {
once: true
});
video.src = src;
});
}
})();

dynamically load src for audio and stop after src does not exist

I have songs called *song_1*, *song_2*, *song_3* etc. I want them to play immediately after the previous has finished. That's why I have an "ended" function which plays the next song automatically (works fine so far). The amount of songs I have is obtained dynamically, so I can't tell to stop loading the next src by hardcoding. But when a src does not exist, I get an error, and I cannot replay the songs after finishing etc. How can I prevent this error?
HTML:
<audio id="audio">
<source id="mp3Source" type="audio/mp3" />
</audio>
JQuery:
var audio = $("#audio");
var src = "audio/song_";
var countSongs = 0;
audio.addEventListener("ended", function() {
countSongs++
$('#mp3Source').attr('src', src+countSongs.toString()).detach().appendTo(audio);
audio.play();
});
$('#mp3Source').error(function() {
alert("error");
});

Try this. Getting the native DOM element as jQuery knows nothing about .play() method on the wrapped array returned by the $('#audio') selector:
var audio = $("#audio");
var src = "audio/song_";
var countSongs = 0;
audio.addEventListener("ended", function() {
countSongs++
$('#mp3Source').attr('src', src + countSongs.toString()).detach().appendTo(audio);
audio[0].play();
});

You seem to be a little confused regarding jQuery objects and DOM elements?
$('#audio') probably doesn't have an addEventListener method or a play method, so I'm suprised if that works at all ?
I would suggest something more like
var audio = $("#audio");
var src = "audio/song_";
var countSongs = 0;
audio.on({
ended: function() {
$('#mp3Source').prop('src', src + (++countSongs))
.detach()
.appendTo(audio);
this.load();
this.play();
},
error: function(e) {
alert( JSON.stringify(e) ); // for no console
$(this).off('ended');
}
});

Reset Vimeo player when finished

How can I reset an embed Vimeo video to how it was onload after it's done playing?
The Vimeo API offers an unload method
player.api("unload")
But it isn't working for non-flash players.

Using the Vimeo API, you can add an event for finish to trigger the reload. The Vimeo API includes a method unload(), but it isn't supported in HTML players. Instead, reset the URL in the iframe to return the video to it's original state.
HTML
<iframe src="//player.vimeo.com/video/77984632?api=1" id="video"></iframe>
JS
var iframe = document.getElementById("video"),
player = $f(iframe);
player.addEvent("ready", function() {
player.addEvent('finish', function() {
player.element.src = player.element.src;
});
});

unload() should now work properly across all players.

Variation of Steve Robbins solution, with Vimeo specific solution. You don't have to reach the end of the video, but anytime the user bails out, including clicking on a button:
Simple Javascript solution with Vimeo Library loaded:
https://player.vimeo.com/api/player.js
function ResetVideo()
{
var Field = "iframe-video"; // <iframe id=iframe-video
var iframe = document.getElementById(Field);
var bLoad = LoadVimeoLib(); // Is the Vimeo lib loaded
if(bLoad > 0)
{
var Videoplayer = new Vimeo.Player(iframe);
Videoplayer.pause(); // Pause the video and audio
Videoplayer.setCurrentTime(0); // Reset the video position
// Reset the video back to the iframe
VideoSrc = Videoplayer.element.src; // Save the video source
Videoplayer.element.src = ""; // Empty the source
Videoplayer.element.src = VideoSrc; // Reset the video source
}
}
function LoadVimeoLib()
{
if (typeof jQuery === 'undefined')
{
alert('no jquery installed');
return 0;
}
var scriptlen = jQuery('script[src="https://player.vimeo.com/api/player.js"]').length;
if (scriptlen == 0)
{
jQuery.ajax({
type: "GET",
url: "https://player.vimeo.com/api/player.js",
dataType: "script"
});
}
return 1;
}

How to mute/unmute sound of an audio using javascript

I have created a fiddle of my function here( http://jsfiddle.net/rhy5K/10/ ) . Now i want to provide the Sound "Mute/unpute" option for users. Example if i click on "a link then sound playing like Get ready,5,4,3,2,1 should be mute and vice-versa.
I am thinking like to call a to toggle_sound function on click, but i am confuse like what should i write inside the function to mute the sound.
Please provide me a logic, or a solution for my problem.
Explanation using code example:
I want to MUTE/UnMUTE this below sound playing
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
Warning: This JS fiddle demo may play sound on load

Try
HTML5 Video_tag for display video with audio
or
this below example along with html5 with jquery
window.my_mute = false;
$('#my_mute_button').bind('click', function(){
$('audio,video').each(function(){
if (!my_mute ) {
if( !$(this).paused ) {
$(this).data('muted',true); //Store elements muted by the button.
$(this).pause(); // or .muted=true to keep playing muted
}
} else {
if( $(this).data('muted') ) {
$(this).data('muted',false);
$(this).play(); // or .muted=false
}
}
});
my_mute = !my_mute;
});

I think you can use:
document.getElementById(id).volume = 1;
or
document.getElementById(id).volume = 0;