I hope you're very well.
on my website I have a video player I want the video to be paused when I scroll
html:
<video id="video_home" class="embed-responsive-item" loop="loop" playsinline="playsinline" autoplay="autoplay" class="vimeo-video" controls>
<source src="img/video-home-rcn.mp4" type="video/mp4" />
<source src="img/video-home-rcn.mp4" type="video/webm" />
<source src="img/video-home-rcn.mp4" type="video/ogg" />
</video>
jquery:
var myvid = $('#video_home')[0];
$(window).scroll(function(){
var scroll = $(this).scrollTop();
scroll > 500 ? myvid.pause() : myvid.play();
})
link:
https://html.canalrcn.com/CanalRCN/react/index-new-v2.html
usually you must do all jQuery searches after DOC ready,
var myvid; $(document).ready(function() {
myvid = $('#video_home')[0];
})
or shorthand version
$(funtion() { myvid = $('#video_home')[0]; })
IF that doesn't work use the javascript debugger in your browser to see if jQuery is finding your target OK.
After checking the link i got this that you need to change to var myvid = $('#video_home')[0]; to var myvid = $('.embed-responsive-item')[0]; as your video has not any id. It has class embed-responsive-item if you want to use id then add that in video tag.
Related
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>
I have a video tag that needs to have the attributes loop and autoplay on desktops and just the controls and a poster attribute on mobile devices (around 767 pixels). How to I have the video have specific attributes depending on device width? I would like to have it vary depending on devices because many mobile devices to not respond well with the autoplay attribute. Here is some code that may better illustrate what I want to do:
//Here, I would like to do something like this:
document.addEventListener("DOMContentLoaded", function(event) {
//for mobile
if ($(window).width() < 767) {
var video = $('#video').get(0);
$('#video').removeAttr('autoplay');
$('#video').removeAttr('loop');
//either that or set attributes here like this:
//$('#video').attr('controls', 'controls');
//$('#video').attr('poster', 'poster');
}
// Desktops/tablets
else if ($(window).width() > 767) {
$('#video').attr('autoplay', 'autoplay');
$('#video').attr('loop', 'loop');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" autoplay="autoplay" loop="loop" poster="images/video.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<img src="images/video.jpg" height="500" style="width: 100%;" />
</video>
How do I go about doing this (I've tried the code above, and then some and I wasn't able to get anything working)? Also is it best to just not specify any code at all in the HTML and just set it in the javascript or just remove it depending on context. Thank you.
P.S. I rather not use Media Queries...
I was able to solve this by adding all the controls manually in the HTML and simply removing the desired control depending on the type of device. Here is some code:
function load() {
var video = document.getElementsByTagName('video')[0];
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
) {
//This is if the device is mobile
video.removeAttribute('autoplay');
video.removeAttribute('loop');
}
else {
//anything other than mobile (i.e. Desktop)
video.removeAttribute('controls');
}
}
<video controls="controls" autoplay="autoplay" loop="loop" poster="images/video.jpg" onloadstart="load()">
<source src="images/video.mp4" type="video/mp4" />
<source src="images/video.webm" type="video/webm" />
<p>Hello!?!?!?</p>
<img src="images/video.jpg" />
</video>
Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<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">
</video>
<button id="change">Change source (mp4 only for this example)</button>
i am working on a site that has a video as soon as we enter the site.
The problem is it just ends and I want to replace it with an image after it ends.
Is there a way I can redirect it within the same container.?
<video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
<source src="videos/trailer.webm" type="video/webm">
<source src="videos/trailer.mp4" type="video/mp4">
<source src="videos/trailer.ogv" type="video/ogg ogv">
</video>
You'll have to use JavaScript to detect video end but it's easy to implement:
var video = document.getElementById('video_background');
video.addEventListener('ended', function() {
// show image here
}, false);
I would recommend to target a parent container which has a pre-loaded image hidden and which you toggle to when the event kicks in (obviously also hiding the video element).
You could also add the image dynamically but be aware of that you will have a delay while the image is loading.
You need to wrap your video tag in a div container. Try the following code:
CSS:
#wrapper{
width:640px;
height:360px;
background:#000;
}
#image_background{
display:none;
}
HTML:
<div id="wrapper">
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%">
<source src="videos/trailer.webm" type="video/webm" />
<source src="videos/trailer.mp4" type="video/mp4" />
<source src="videos/trailer.ogv" type="video/ogg ogv" />
</video>
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" />
</div>
JS:
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
EDIT: how do i smooth-en the transition fade it in or something?
I would use jQuery for this as it is built with such functionalities.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var video = $('#video_background');
var image = $('#image_background');
video.on('ended', function() {
$(this).fadeOut('200',function(){//$(this) refers to video
image.fadeIn('200');
});
});
</script>
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();
});