In my API class today we learned how to show the camera with the tag. We also learned how to add effects with JavaScript. But, I'm stuck on how to reverse these effects. How would I make the clear button clear the current effect?
<body>
<h1>Magic Camera</h1>
<div class="tools">
<button id="sepia">Sepia</button>
<button id="">Clear</button>
</div>
<div class="scene">
<img src="billboard.jpg">
<div class="video-container">
<video id="myCamera" autoplay></video>
</div>
</div>
<script>
var myDevices = navigator.mediaDevices;
var permissions = {
audio: false,
video: true
};
myDevices.getUserMedia(permissions).then(showCam);
function showCam(stream){
$("#myCamera")[0].srcObject = stream;
}
function addEffect(event){
var effect = event.currentTarget;
var filter = `${effect.id}(1)`;
$("#myCamera").css("filter", filter);
}
$("button").click(addEffect);
</script>
</body>```
$('#myCamera').css('filter', '');
Related
I have a carousel powered by Owl carousel v2 with lazy load enabled:
JS:
$('.owl-carousel').owlCarousel({
lazyLoad: true
});
HTML:
<div class="owl-carousel">
<div>
<img class="owl-lazy" data-src="...">
</div>
</div>
which works OK. Then I tried to apply the same code to the HTML5 video tags I have:
<div class="owl-carousel">
<div>
<video>
<source class="owl-lazy" data-src="..." type="video/mp4">
</video>
</div>
</div>
which didn't work. Any ideas how to enable it for videos too?
If anybody came accross the same issue, the solution I came up with is below:
// Lazy load for videos
var modalSlider = $('.owl-carousel');
modalSlider.on('changed.owl.carousel', function(event) {
var current = event.item.index;
var currentVideo = $(event.target).find('.owl-item').eq(current).find('video');
var currentVideoSource = currentVideo.find('source');
// Pause all videos
var videos = modalSlider.find('video');
if ( videos.length ) {
videos.each(function() {
$(this)[0].pause();
});
}
// Play if video found
if ( currentVideo.length ) {
var currentVideoSrc = currentVideoSource.attr('data-src');
currentVideoSource.attr('src', currentVideoSrc);
currentVideo[0].load();
currentVideo[0].play();
}
});
I am working on a project using <video>, trying to make external HTML buttons play/pause, rewind slow, rewind fast, and fast forward control a video using JavaScript. I have the buttons appearing where I want them, but when I try to use them in the browser, they don't do anything to control the video, and the play button doesn't switch to pause and vice versa. I've tried for hours, looking all over the Web to find anything that I can use to help. Most solutions I find are using jQuery which I understand is easier, but it's not what I need. I just want to do it using pure JavaScript so I can better understand it. Included is my existing code. Any help on how I can get them to work would be appreciated!
HTML:
<script src="sample.js"></script>
<div class="jumbotron">
<div class="container">
<video id="video" poster="images/art/preview.png" width="100%" controls>
<source src="images/art/sample.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="images/art/sample.webm" type="video/webm; codecs="vp8, vorbis"">
<source src="images/art/sample.ogv" type="video/ogg; codecs="theora, vorbis"">
Your browser does not support HTML5 video
</video>
<div id="buttonbar">
<button type="button" id="fastBck">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" id="rew">
<span class="glyphicon glyphicon-backward"></span>
</button>
<button type="button" id="play-pause">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="fastFwd">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
</div>
JavaScript:
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
}
playButton.addEventListener("click", function(){
if (video.paused==true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
})
rewButton.addEventListener("click", function(){
//not sure exactly how to use currentTime to rewind, or fast forward
})
let the browser pick the right codecs for your video
you defined your variables out of scope (you've encapsulated them inside the onload function)
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
playButton.addEventListener("click", function(){
if (video.paused===true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
});
rewButton.addEventListener("click", function(){
//not sure exactly how to use currentTime to rewind, or fast forward
});
};
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
<div class="jumbotron">
<div class="container">
<video id="video" width="100%" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support HTML5 video
</video>
<div id="buttonbar">
<button type="button" id="fastBck"><span class="glyphicon glyphicon-fast-backward"></span></button>
<button type="button" id="rew"><span class="glyphicon glyphicon-backward"></span></button>
<button type="button" id="play-pause"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" id="fastFwd"><span class="glyphicon glyphicon-fast-forward"></span></button>
</div>
</div>
</div>
Good luck with the fast forward and your other methods
window.onload = function() {
var video = document.getElementById("video");
var playButton = document.getElementById("play-pause");
var rewButton = document.getElementById("rew");
var fastBckButton = document.getElementById("fastBck");
var fastFwdButton = document.getElementById("fastFwd");
playButton.addEventListener("click", function(){
if (video.paused==true) {
video.play();
playButton.className="glyphicon glyphicon-pause";
} else{
video.pause();
playButton.className="glyphicon glyphicon-play";
}
})
rewButton.addEventListener("click", function(){
//not sure exactly how to use
currentTime to rewind, or fast forward
})
}
Move listeners inside onload function. Listeners won't be attached until the page is loaded. Respect for wanting to use vanilla JS, however unnecessary.
I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds
I am trying to get an input image to change through javascript when clicked but I get the following error through Google Chrome debug:
Uncaught TypeError: Cannot call method 'addEventListener' of undefined
The Following is my HTML code:
<section id="skin">
<video id="mainPlayer" width="640" height="360">
<source src="video.mp4">
</video>
<nav>
<div id="buttons">
<input type="image" src="play_button.png" id="playButton" width="22" height="22">
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
And this is my javascript code:
function doFirst() {
mainPlayer = document.getElementById('mainPlayer');
playButton = document.getElementsByName('playButton')[0];
playButton.addEventListener('click', playOrPause, false);
}
function playOrPause() {
if (!mainPlayer.paused && !mainPlayer.ended) {
mainPlayer.pause();
playButton.src="controls.png";
window.clearInterval(updateBar);
} else {
mainPlayer.play();
playButton.src="play_button.png"
updateBar = setInterval(update, 500);
}
}
window.addEventListener('load',doFirst,false);
playButton = document.getElementsByName('playButton')[0]; you will get an empty array here
you need to add name attribute to your input tag or change to
playButton = document.getElementById('playButton');
The code below is the general template for my music page.
The slideshow moves the song/image gallery forward or back sequentially, but alas, the 'switchFeature' function, which should allow you to jump to various tunes listed in the sidebar, doesn't seem to be working.
Can anyone point out where my error is, or what needs to be done to make it work?
Thanks!
<!-- music.php -->
<?php require 'header.php' ?>
<script type="text/javascript">
$(document).ready(function() {
$(".tuneslides").hide();
var idName = ["#tune1", "#tune2"];
var indexNum = 0;
$(idName[0]).fadeIn(1000);
$("#slidenext").click(function() {
$(idName[indexNum]).fadeOut(300, function() {
indexNum++;
if (indexNum > 1) {indexNum = 0;}
$(idName[indexNum]).fadeIn(500);
});
});
$("#slideback").click(function() {
$(idName[indexNum]).fadeOut(300, function() {
if (indexNum == 0) {indexNum = 1;}
else {indexNum--;}
$(idName[indexNum]).fadeIn(500);
});
});
// alas...
function switchFeature (newIndexNum) {
$(idName[indexNum]).fadeOut(300, function() {
$(idName[newIndexNum]).fadeIn(500);
indexNum = newIndexNum;
});
};
});
</script>
<div id="sidebar">
<h2>Featured Tunes<br>(click to show)</h2>
<p onclick="switchFeature(0)">Tune 1</p>
<p onclick="switchFeature(1)">Tune 2</p>
</div><!--sidebar-->
<div id="main">
<div id="slideshow">
<div id="slideback">Previous</div>
<div id="slidenext">Next</div>
<div class="tuneslides" id="tune1">
<p class="tsTitles">Tune 1 </p>
<audio controls>
<source src="music/tune1.mp3" type="audio/mpeg">
<img src="images/image1.jpg"/>
</audio>
</div>
<div class="tuneslides" id="tune2">
<p class="tsTitles">Tune 2</p>
<audio controls>
<source src="music/tune2.mp3" type="audio/mpeg">
<img src="images/image2.jpg"/>
</audio>
</div>
</div> <!-- slideshow -->
</div><!--main-->
<?php require 'footer.php' ?>
You defined switchFeature within the scope of the
$(document).ready(function(){
});
Meaning switchFeature is in a different scope as the onclick event is trying to call.
Try to define your function like the following, and see if that works:
window.switchFeature = function(newIndexNum) {
$(idName[indexNum]).fadeOut(300, function() {
$(idName[newIndexNum]).fadeIn(500);
indexNum = newIndexNum;
});
};
I would rewrite it a little so you don't have to do onclicks and you can keep everything together. Change the onclicks to use a class and html5 data:
<p class="tune" data-player="0">Tune 1</p>
<p class="tune" data-player="1">Tune 2</p>
Then convert that function switchFeature to a click for the tune class:
$('.tune').click(function() {
var newIndexNum = $(this).attr('data-player');
$(idName[indexNum]).fadeOut(300, function() {
$(idName[newIndexNum]).fadeIn(500);
indexNum = newIndexNum;
});
});
Codepen: http://codepen.io/maxwbailey/pen/iKxCo