I am trying to use Bootstrap carousel with videos. I have a list of videos of 5 sec. I need to auto-play them using this carousel.
Currently , Bootstrap plays the very first video but I also wish to automatically play all the others when they slide into the screen.
Example:
http://jsfiddle.net/wxMrf/20/
Code :
var $myCarousel = $("#myCarousel");
$myCarousel.carousel({
interval: 2000
});
I checked the fiddle you have created and you seem to embed the video in an iframe. Assuming you have the complete url of the video file resource available with you, you might want to try encapsulating them in a video tag supported by HTML5. It has an autoplay option associated with it and is supported in all major browsers today (upto IE8).
From W3Schools, you could try something like this in context of your code:
<div class="item">
<div class="container">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
<video controls autoplay>
<source src="foobar.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Ofcourse, using the video tag limits browser compatibility to some extent which is the whole purpose of using an iframein the first place. That's something you can decide. Also, if you are embedding videos from Youtube or Vimeo in an iframe, they almost certainly have an autoplay option in their videos. You should probably read up the relevant docs to get started on that. Hope this helps you out.
Try this:
$myCarousel.on('slid', function() {
console.log("Slide occur");
//play video
});
Note: I think you are using Iframe to play video, so for playing video using this function, you can simply reload Iframe src.
I have created the working jsFiddle, however while accessing 'video' element within iframe throws cross-origin-request security exception.
To overcome this start Chrome with following command,
chrome.exe --allow-file-access-from-files --disable-web-security
Open http://jsfiddle.net/wxMrf/21/ and see it working
Basically the solution is on the same line what 'Manwal' suggested,
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
Give this a shot:
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
Related
I am building one of my first webpages and am very novice when it comes to any custom html, js, css, etc. I'm building the site in Squarespace on the Alex template. My goal is to have a lightbox that opens from a text link and plays a youtbe video. Currently, I am able to get the text link to open a lightbox (featherlight) and play a youtube video (iframe embed), but then I run into 2 problems.
1. The audio for the video plays twice
2. when I close the light box, one set of the audio keeps playing.
I am totally lost here and have scoured trying to find a solution. Here's what I have:
<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div style="display:none;">
<div class='lightbox_content'id=ytplayer>
<iframe id="video1" width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0&enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
<script>
$("#open_lightbox").click(function(){
$("#video1")[0].src += "&autoplay=1";
ev.preventDefault();
});
</script>
</div>
</div>
A lot of this is taken from different posts, but I haven't found anything that works. This is the last bit I had worked out that gets the video to play, but I don't know how to stop it, or why there are two audio instances running. Any help is appreciated.
Try this:
$('.#open_lightbox').on('click', function(ev) {
setTimeout(function() {
$("#video1")[0].src += "&autoplay=1";
},150);
//ev.preventDefault();
});
The way you do it used to work - I just had to use the trick again and faced the same problems. Adding a small delay and remove the preventDefault() worked for me.
You might need to put a more specific jQuery selector for the "#video1" so it isn't auto-playing two videos.
I am trying to get sources of videos through javascript. The code below is working fine. However it only works for one video only, if I was to add the same code for multiple videos, none of the videos work. I am using video.js as the main player for videos.
html:
<source id="01" src="" type='video/mp4'/>
JavaScript:
document.getElementById("01").src="link";
You absolutely need to reload the video after changing the Source. I give you an exemple with jQuery
var video = document.getElementById("01");
$(video).attr('src', "newlink.mp4");
video.load();
But you can achieve it without jquery
var video = document.getElementById("01");
video.src= "newlink.mp4";
video.load();
You have to use the videojs API to change the source:
videojs('YOUR_PLAYER_ID').src("/path/to/newlink.mp4")
This will work for flash and HTML5
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).
I'd like to click on an embedded youtube video using javascript (so the video plays automatically). I successfully simulated a click on a <div> like this:
function f(){
alert("hello");
}
<div id="someid" onmouseup="f();">
my text
</d>
document.getElementById("someid").onmouseup();
How can the above code be adapted to work with an embedded youtube video?
Just add &autoplay=1 to the link of the video in the <embed> tag.
If he does what you suggest the views on the embedded video won't count. I'm pretty sure he is asking his question because he is trying to find a way to get the video to autoplay and have youtube count the views at the same time.
I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.