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.
Related
I have a feature where I can upload videos to the system. It works fine but I am having trouble playing the video, I can't find a library or a player to use. Anyone can recommend an angular js video player ? or a directive we can use. Thank you. iframe does not work because we know it uses the built-in player from the website we embed. There is no issue regarding uploading the videos, the issue is on what video player library we can use.
The code below will play a video using the standard browser HTML5 video player - this is old, original Angular 1, as I think you ask.
// function called when user clicks the play button for a particular video
function playVideo(video) {
console.log("playVideo button clicked");
// set the video player window to the player window instead of blank
$scope.playerWindowURL = './templates/video_player_window.html';
$scope.collabServerPlayVideoURL = colabConfig.colabServerBaseURL + "/uploaded_videos/" + video.file_name;
};
<div>
<!-- HTML5 video tag to play video -->
<video width="320" height="180" autoplay controls="true" src="{{collabServerPlayVideoURL}}"></video>
</div>
Full repository is here in case you want to see it - it not maintained but worked last time I checked a couple of years ago: https://github.com/mickod/ColabServer
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();
});
I am using Firefox on Ubuntu Linux for testing. If I put the following link to an MP4 file in a page, the MP4 file plays in the browser window without any need for additional scripts or players:
<img src="/video/thumbnails/test.png" alt="" />
However, I want to be able to stay on the same page, and play the video in a popup window, with the rest of the screen darkened. I believe this effect is called a "lightbox".
Thinking I could just use any lightbox and leave it to the browser to play the video file, I found an open source Javscript library for doing the lightbox effect, called Lightbox2. It's light and simple.
Following the instructions, I loaded the Javascript in the <head> of my web page, and then I added data-lightbox="image-1" to the link:
<img src="/video/thumbnails/test.png" alt="" />
When I click on the thumbnail image, the lightbox effect works, but the video does not display or play. The lightbox darkens the screen and displays a white square in the middle with no video file or player controls.
I know there are Javascript lightbox effects designed for playing videos, but, since the browser can play videos anyway, what differentiates those Javascript libraries from the one I'm using?
Why can't I play a video in this simple lightbox effect?
Can it be modified to play video, or do I need to scrap it and find a different library? Recommendations for similar video capable libraries are very welcome.
I'm really sorry for getting back on this so late.
Okay so just an approach I had in mind at that time. It's left to you if you wanna try this out. But, if you want to avoid using third party scripts that you might have trouble tweaking here's simple approach. preferably, I'm going to use jquery code here just to make it look nice.
so lets say you want to have the video appear to pop up when the link is clicked. Why not just have our own div that contains a video element and then keep it hidden till we need it.
.
.
.
<body>
<div id="vid-container" style="display:hidden;position:fixed; background: rgba(0,0,0,0.5);
padding:40px; text-align:center;">
<video id="vid"/>
</div>
</body>
.
.
.
So, basically what I'm intending to do is that when a person click's on a video link, we'll use some jquery to toggle the popup div. As you can see that in the video tag I've only specified the id. This is only because I'm intending to set the video src and the codec after a particular link is clicked via javascript ( and a little bit of jquery).
So suppose we have a link like so:
<a href="Link_URL" class="vid-link" ><image src="img_URL" class="vid-img"/></a>
And a person clicks on it, this is how I though you could handle it through the following script.
<script>
$(window).load(function(){
// first of all I'm manually setting the pop's width and height to fit the entire screen
$("#vid-container").css("width",window.innerWidth+"px");
$("#vid-container").css("height",window.innerHeight+"px");
$(".vid-link").bind("click", function(){
// first get the video url from the link href
var vid_url= $(this).attr("href");
// now grab hold of the video and set it up by plugging in the video url
var video= document.getElementById("vid");
video.type="video/.mp4";
video.src="+vid_url+";
video.controls=true;
video.autoplay=false;
// now toggle the popup visible
$("vid-container").fadeToggle("slow");
});// end of click handler
});// end of window.load event
</script>
We'll I think that should solve the bare necessities of your requirement. You could do alot more with it.
Hope this helps :)
Viva la HTML5!
I want to ask you how to code html audio (media) player, which is based on youtube video. So you get youtube video URL and add it to your website as audio media player (without video). Thanks. Have a nice day
A tad of Googling always helps! Useful links
Using this website yields the following code:
<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300" src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID?rel=0&autoplay=1"></iframe>
</div>
</div>
If you don't want your audio to autoplay, simple remove &autoplay=1 from the src of the iframe.
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.