We Keep Coding

SublimeVideo JavaScript

I've been using SublimeVideo, and I've done so much with it already for the site I'm working on.
I've got 15-20 videos that I'm successfully using via SublimeVideo on a site in the basic way, by having a link on the page the user clicks on, and when clicked, the video opens in the SublimeVideo lightbox and starts playing.
But now, I'm needing to create "shorter URLs" for these videos that can be sent out in print publications and emails, and where the user is taken to the website to view, not just the video file.
Ideally, I was hoping to just use the id/data-uid with a hashtag in a single-page url and have the chosen video to automatically launch'n'play within the lightbox. That seems to be impossible (?).
I could settle with having a single page with the video tags hidden and have the hashtag unhide it and play it when in the URL. If none of this can work in a slick way, maybe I'll just go old-school and make a page for each video and just embed it in the page..
Anyway, after scouring all the documentation pages, their forums, and searching the web, I've only found a couple of options - neither of which have actually worked. I'll paste them below:
First, here's an example of the HTML I'm using for all the videos:
<p class="">video1 text link on page</p>
<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/video1.mp4" />
</video>
That, by itself, works great! I don't want to change that. When the text link is clicked, the lightbox opens and the video plays perfectly.
So, let's say the page that holds the 15-20 videos with the above code for them is at:
http://example.com/resources/index.php
I thought I could simply make that URL for the first video:
http://example.com/resources/index.php#video1
...or even better...
http://example.com/resources#video1
...and follow suit for all the other video IDs.
And to get that to work, I've tried:
<script type="text/javascript">
sublimevideo.ready(function()
{
if (window.location.hash == '#video1') {
sublime('video1').play();
} else
if (window.location.hash == '#video2') {
sublime('video2').play();
} else
if (window.location.hash == '#video3') {
sublime('video3').play();
}
});
</script>
...that doesn't work. For some reason it works with whatever the first video is on the page, but by "work" I mean, it unhides it and makes it playable, not open in the lightbox and auto play.
So then I found code in the sharing documentation area like this:
<script type="text/javascript">
var hashtag = "#video1";
var hashtag = "#video2";
var hashtag = "#video3";
if (document.location.hash == hashtag) {
showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
}
</script>
...but that doesn't work either.
Could somebody that does know JavaScript please spell it out for me?

I'll put the code that fixed the issue for me here in hopes it helps somebody else someday that may search and find it.
By putting the below code in the head of the page, under the...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>
...library (which is the random characters/numbers .js that SublimeVideo gives you in your account area), I was able to finally get the above detailed problem to work (YAY!!!).
So, using the same example as above, this URL now works as I needed (by not only taking you to the resources page, but also by launching the particular video in its lightbox).
http://example.com/resources.php#video=interview2
...and by putting:
RewriteRule ^resources$ resources.php [L]
...in the .htaccess file in the same dir, I was able to make it even easier for the user:
http://example.com/resources#video=interview2
As I understand it, the below JavaScript addition finds the hash, then looks for the "video=", then takes whatever is after that, and if it finds a matching "id" in an "a" tag, then it tells it to do it's SublimeVideo thing by launching that video in the lightbox. Brilliant!
<script type="text/javascript">
$(document).ready(function () {
var lochash = location.hash.substr(1);
var mylocation = lochash.substr(lochash.indexOf('video='))
.split('&')[0]
.split('=')[1];
sublime.ready(function () {
var lightbox = sublime.lightbox(mylocation);
lightbox.open();
});
});
</script>
Here's the HTML part (for reference):
<p class="">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</p>
<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/interview2.mp4" />
</video>
Also note: I found out through trial and error that the name of the video in the URL, after the "#video=" must be the same as the "ID" in the "A" tag, not the "video" tag! So, you'll notice that the "id=" is (and needs to be) different between the two. The "id=" in the "video" tag is instead the same as the "href=".

Replace img with iframe on click of button

Im pretty new to js/jquery and need some help from someone more knowledgeable!
I have had a good look on this site and on the web but cannot find the answer myself. I've played around myself but with my limited knowledge I just cannot figure out what to do next.
What I've got
I have an img that when clicked is replaced by an iframe (youtube video), much like a placeholder/poster, and that works perfectly with the below code, which I originally found here: How to add a splash screen/placeholder image for a YouTube video:
<div class="playbutton"></div>
<img src="image.jpg" data-video="http://www.youtube.com/videolink">
<script>
$('img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $(this).attr('data-video') +'"></iframe></div>';
$(this).replaceWith(video);
});
</script>
As I said - it works perfectly when the image is clicked it is replaced by the video.
The Problem
I have now added a play button (currently a div but I can use img instead) floating above the img. If I click on the play button nothing happens (obviously as it is nothing to do with the script).
I want this play button to "trigger" the replacing of the img with the iframe but I do not have a clue what to add to my script to make this happen.
What I'm looking for
I'm looking for the play button to be the "trigger" when clicked or ideally to have both the play button and the img as "triggers" so it works if a user clicks on the image too and not just the play button.
While I've got you...
Would I also be able to replace the iframe with the img again if a close button is added to the mix and clicked on?
Any help will be greatly appreciated!
Dale

This will do All you want including close button:
Here is the working fiddle:
http://jsfiddle.net/ANRHT/6/
js:
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+$('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
HTML:
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>

$("#play-button").on('click', function () {
//this fires the same click event from your code.
$("img").trigger('click');
});
$("#close-button").on('click', function () {
$("iframe").replaceWith("<img src='image.jpg'>");
});

jQuery - FadeToggle - different actions if element is visible or not

I have a button, when you click on that button, I'm doing a fadeToggle() to show or hide a popup.
That popup is appearing on top of a flash video that autoplays.
So, what I want to do, is when the popup is visible, I want to pause the video. When it's hidden, play the video.
My video player already support those function. So this is working fine:
videoPlayer.pause();
videoPlayer.play()
So what my FadeToggle() would looks like ? Right now I have this code:
$("#categorySlider").fadeToggle('fast', function() {
var videoPlayer = document.getElementById("videoContainer");
videoPlayer.pause();
});
I'm missing the play() part here, but I cant figure out the syntax to add it?! If fadeToggle is not the right thing to use, any jquery or javascript is fine!
Any helps please?

You could use the jquery :visible selector to find out if #categorySlider is visible or not and depending on that pause or play the video.
$("#categorySlider").fadeToggle('fast', function() {
var videoPlayer = document.getElementById("videoContainer");
if ($("#categorySlider").is(":visible"))
videoPlayer.pause();
else
videoPlayer.play();
});

html5 video "ended" event not working in chrome and IE

I have two buttons on a page that trigger two functions that make two html5 video play, hide and show some elements (including themselves), and call another simple function on ended (that causes the video to go to the first frame and pause, for the effect to work properly).
$('#rotate').click(function rotate(){
$('#rotate').hide();
$('#front_view').css('z-index','2');
$('#back_view').css('z-index','3');
//this is the video:
$('#body_animation').trigger("play").show().bind('ended', function () {
$('#back_view').show();
$('#front_view').fadeOut(500);
$(this).hide();
this.currentTime = 0;
this.pause();
});
$('#rotate_reverse').delay(2000).fadeIn(0);
});
This works fine in firefox and safari, but in chrome and IE something strange happens. The first time the page loads, the "ended" event doesn't seem work. It works fine if you refresh the site (or if you run it offline), though.
You can check the code in here, I narrowed all the site to this problem, so you can see it better:
http://www.hidden-workshop.com/test/
The actual videos and images are different, but the problem is the same. I'm busting my head trying to solve this thing, but I can't find the answer anywhere.
Thanks in advance!!

Your test page isn't live anymore, so I can't check this, but I found that if looping is enabled for the tag (e.g., <video loop="loop">), the "ended" event wasn't firing in Chrome or IE (I didn't test in Firefox). Once I removed the loop attribute, the "ended" event fired in both browsers.
HTML (with loop attribute, which will prevent the 'ended' event form firing):
Remove the loop attribute if you want the 'ended' event to fire...
<video id="video" loop="loop">
<source src="whatever.mp4" width="320" height="240" type="video/mp4" />
Your browser does not support this HTML5 video tag.
</video>
Javascript:
//NOTE: This only fires if looping is disabled for the video!
$("#video").bind("ended", function() {
alert('Video ended!');
});

If you are dynamically adding a <video> to your page that wasn't present in the HTML served from the server you may encounter a race condition that can result in the ended event not being recognized - even if it was added correctly.
I am using knockoutjs to add a different template for phone vs desktop.
<div data-bind="template: { name: videoTemplate, afterRender: initializeVideo }">
This dynamically creates me a <video> element and then calls initializeVideo() after the template is rendered (added to the DOM) to bind the events :
$('video#flexVideo').off('ended').on('ended', (evt) =>
{
alert('ended fired');
}).css('border', '2px solid yellow'); // add yellow border so we know element existed
On my screen the video gets a yellow border (proving the video was present in the DOM and there were no typos). However for some reason the browser isn't yet able to attach the ended event to it - I assume perhaps it was not initialized yet.
Chrome debugging tools shows that it is added, but it doesn't actually work!
It does this in Firefox, Chrome + IE10 which was slightly surprising.
One solution is this:
$('video#flexVideo').off('loadstart').on('loadstart', (evt) =>
{
$('video#flexVideo').off('ended').on('ended', (evt) =>
{
alert('ended fired');
}).css('border', '2px solid yellow');
}).css('border', '2px solid orange');
The loadstart event seems to be bindable right away.
Another is perhaps just a setTimeout - or just bind the event on play.

Toggling between instances of NiftyPlayer on a page - won't stop playing when hidden on IE

I've got a page with links to MP3s, when the link is clicked I use javascript to show a small Flash player (NiftyPlayer) under the link. When a different link is clicked, the old player is hidden and the new player is revealed.
The player auto-starts when the element is shown, and auto-stops when hidden - in Firefox.
In IE it will only auto-start and NOT auto-stop. This is what I would like to solve.
This is an example HTML with link and player
Misunderstood What You Said
<div id="player662431" class="playerhide"><embed src="http://www.example.com/shop/flash/player.swf?file=/mp3/Beat The Radar - Misunderstood What You Said.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer662431" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Here is the javascript (I've got jQuery installed to let me hide all the open players on this page apart from the new one)
function toggle_visibility(id) {
$('.playerhide').hide();
var e = document.getElementById(id);
e.style.display = 'block';
}
I think what I need to do is start the player manually with javascript (rather than using the autostart as=1 function in the URL string)
There is some javascript that comes with NiftyPlayer to allow this EG
niftyplayer('niftyPlayer1').play()
there is also a stop method.
I need some help with javascript - how do I add this call to play into my toggle_visibility function (it has the same unique ID number added to the name of the player as the ID of the div that's being shown, but I don't know how to pull this ID number out of one thing and put it in another)
I also would like to be able to do
niftyplayer('niftyPlayer1').stop()
to stop the audio of the previously running player. Is it possible to store the current ID number somewhere and call it back when needed?
Thanks for the help, i'm a PHP programmer who needs some support with Javascript - I know what I want to achieve, just don't know the commands to do it!
Thanks

If you assigned each niftyplayer object a classname, f.x. ".players", then you could loop through each player, like this:
function toggle_visibility(id) {
$(".players").each(function(){
playerId = $(this).attr('id');
if(niftyplayer(playerId).getState() == 'playing') {
//Stop the currently playing player
niftyplayer(playerId).stop();
//Hide the div that was playing
$("#" + playerId).hide();
}
});
//Start the new player
niftyplayer(id).play();
$("#" + id).show();
}
So what this actually does, is it loops through all the players on the website. It checks if the status of each player is equal to "playing", if it is, then it stops it and hides the div tags. Then it starts the new player and shows that div tag.
I think this does it. Try it out.

I have a much better solution after I noticed a very nasty bug / 'feature' when using Internet Explorer in conjunction.
I had noticed that in IE the pages were taking a very long time to load when I had a lot of hidden Nifty Players, I looked closer using Fiddler and found that each instance of NiftyPlayer was preloading the MP3 in full, rather than loading on demand as with Firefox and Chrome etc.
This meant that a page with 100 items (each item having up to 4 MP3s) took several minutes to load at times with obvious data transfer implications.
My solution which is rather simpler (but maybe clunkier) than Indyber's is to just use
function toggle_visibility(id,mp3location) {
// hide all players
$(".playerarea").html('');
// show clicked player
$('#' + id).html('<embed src=\"http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/mp3/' + decodeURIComponent(mp3location) + '.mp3&as=1\" quality=high bgcolor=#000000 WMODE=transparent width=\"161\" height=\"13\" align=\"\" type=\"application/x-shockwave-flash\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" class=\"playerNew\">');
}
which works fine with IE, and also solves the problem of not being able to stop the players from playing in IE