Unable to select video - javascript

I am trying to mute / unmute my video. But to start with, it looks like I am not able to select my video. Tried tutorial examples and answers to similar questions but they all point to the same way of selecting the video. Please advice what is wrong here. Thank you.
<!-- HTML -->
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<!-- JS -->
$(function() {
// seems not being selected. Tried without hash and same result.
var vid = $("#myVideo");
//alert works but clearly nothing happening with mute controls
$("#enableMute").click(function(){
alert("enableMute");
vid.muted = true;
vid.volume = 1.0;
});
//alert works but clearly nothing happening with mute controls
$("#disableMute").click(function(){
alert("disableMute");
vid.muted = false;
vid.volume = 1.0;
});
//if i click this button first, the alert is "alert undefined"
$("#checkMute").click(function(){
alert('alert: ' + vid.muted);
});
});

The video is being selected and put into the variable. Using .muted won't work and you need to use jQuery's .prop() function as I found out in this question.
This should work:
HTML
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
JavaScript
$(function() {
// Video is being selected
var vid = $("#myVideo");
$("#enableMute").click(function() {
alert("enableMute");
vid.prop('muted', true);
vid.prop('volume', 1.0);
});
$("#disableMute").click(function() {
alert("disableMute");
vid.prop('muted', false);
vid.prop('volume', 1.0);
});
$("#checkMute").click(function() {
alert('alert: ' + vid.prop('muted'));
});
});
To see it in action with a sample video, go to this link.

Related

Unable to Mute HTML5 video using jQuery attr

Trying to mute video using attr but it doesn't work.
HTML
<video autoplay muted class='preview-video'>
<source src='file.mp4' type='video/mp4'>
</video>
jQuery
function volumeToggle(button) {
var muted = $(".preview-video").attr("muted");
$(".preview-video").attr("muted", !muted)
}
However, when I try prop() instead of attr() it works. Can someone explain in detail the reason behind it?
You need to toggle the muted property of the video element, not the attribute. Try this:
let $vid = $('.preview-video');
$('button').on('click', function() {
$vid.prop('muted', (i, m) => !m);
});
video {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Mute</button>
<video autoplay muted class='preview-video'>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Can I play sound of several videos being displayed at the same time with one button?

The sound is muted so videos autoplay when page loads and I want one button to disable the mute of all the videos.
I have tried with TagName and Class instead but couldn't manage to make it work.
function toggleMute() {
var video=document.getElementById("dude")
if(video.muted){
video.muted = false;
} else {
video.muted = true;
}
}
<button onclick="toggleMute();">
sound on
</button>
<a href=""><video id="baby" poster="" autoplay muted loop>
<source src="baby.mp4" type="video/mp4"></video></a>
<a href=""><video id="joel" poster="" autoplay loop muted>
<source src="joel.mp4" type="video/mp4"></video></a>
<video id="dude" poster="" autoplay loop muted><source src="dude.mp4" type="video/mp4"></video>
I expect all videos that are autoplaying to play sound at the same time.
This should do the trick, just add all the video element's IDs to the videos array!
var videos = ['1', '2']; // Place your video ID's in this array!
function toggleMute() {
videos.forEach(function(element) { // For each ID in the array, unmute/mute the ID
if(document.getElementById(element).muted){
document.getElementById(element).muted = false; //
} else {
document.getElementById(element).muted = true;
};
});
};
<video id="1" src="https://ia803005.us.archive.org/17/items/big_buck_bunny_201906/big_buck_bunny.mp4" autoplay muted>Your browser doesn't support videos!</video>
<video id="2" src="https://ia803009.us.archive.org/22/items/big-buck-bunny/big-buck-bunny.mp4" autoplay muted>Your browser doesn't support videos!</video>
<button onclick="toggleMute()">Mute/Unmute</button> <!-- When this button is clicked, run the toggleMute() function -->
More about .forEach

Display elements only when player is paused

I want try to display some information inside div content when player is paused, but problem is because this is displayed when player is paused and when is seeked.
I have create example:
var video = $('#video')[0];
video.addEventListener("playing", function() {
$('.text').text('playing');
});
video.addEventListener("pause", function() {
$('.text').text('pause');
});
video {
width:300px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
If you seeking you will see that player is change event to pause. Can't find solution to display something only when player is paused. Any idea?
You can add another event listener for seeking using the WebEvent seeking which is fired when a seek operation began.
Check the Code Snippet below for a practical example of using the seeking event.
var video = $('#video')[0];
video.addEventListener("playing", function() {
$('.text').text('playing');
});
video.addEventListener("pause", function() {
$('.text').text('pause');
});
video.addEventListener("seeking", function() {
$('.text').text('seeking');
});
video {
width:300px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Audio play on hover / mouse over, possible without jQuery ?

I just put together this code to play audio on hover.. on a test page, trying to incorporate it into the rest of the site, but the jQuery is clashing with other jQuery, and noconflict mode at this point is a pretty huge job. Is it possible to do the following using only javascript ?
<audio id="whiterose" preload="auto">
<source src="//sarahboulton.co.uk/audio/white-rose.mp3"></source>
<source src="//sarahboulton.co.uk/audio/white-rose.ogg"></source>
</audio>
<div class="whiterose">
white rose?
</div>
<script>
//change audio 1 to audio 2.. 3 .. etc
var audioOne = $("#whiterose")[0];
$(".whiterose a")
.mouseenter(function() {
audioOne.play();
});
</script>
http://sarahboulton.co.uk/audio.html#
Thanks !
<audio id="audio" preload="auto" src="http://sarahboulton.co.uk/audio/white-rose.mp3"></audio>
<div id="test" style="background-color:red;" class="whiterose">
white rose?
</div>
<script>
var test = document.getElementById("test");
test.addEventListener("mouseover", function( event ) {
var audio = document.getElementById("audio");
audio.play();
}, false);
</script>

Javascript to stop HTML5 video download, restore source when video is played

I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});

Categories