Autoplay Sublime Video with Hashtag (even with Lightbox)
Intro
Ever wanted to send a newsletter with a link to your homepage, but you have a featured video you want to automatically play? With <a href="http://sublimevideo.net">Sublime Video Player</a>, it is pretty easy.
Sidenote: this doesn't explain how to add a video from scratch, just how to make it autoplay. See <a href="http://docs.sublimevideo.net/quickstart-guide">Sublime's Quick Start Guide</a> for help.
Background
I couldn't find any documentation that actually explained explicitly how to do this, but it is quite easy to have a video play automatically. There is a ready event for the video element, and you can simply check if there is a hash tag in the URL and if so automatically play the video. This will work even if you are using the Sublime Video Player as a lightbox.
The Code
// (Javascript)
// When the video is ready
sublimevideo.ready(function() {
// check if they are at the /#autoplay-video URL
if (window.location.hash == '#autoplay-video') {
// If so, play the video automatically
sublimevideo.prepareAndPlay("video-element-css-id");
}
});
Example Usage:
http://example.com/my-page-with-a-video/#autoplay-video
Written by Andy Fleming
Related protips
14 Responses
i'm banging my head against the wall trying to figure out how to get this to open in the lightbox.
i have a series of videos that need to open in the lightbox (that works if i click the link on the page) from links placed in emails or pdf's.
your assistance would be greatly appreciated.
I believe their javascript API has changed since I wrote this tip. Check out their documentation for info on how to use their lightbox player: http://docs.sublimevideo.net/javascript-api/lightbox
wow, fast reply! thanks!
yeah, i've been over those documentation pages. problem is, i don't know javascript anywhere near like i should. i'll just keep trying to piece parts together until either something works or i give up. unless somebody posts a copy/paste code snip (hint hint).
heh, if you can, i'd appreciate it; if you don't, i understand.
thanks anyways!
.:peace:.
The syntax is here: http://docs.sublimevideo.net/lightbox
<video id="video1" style="display:none" width="640" height="360" poster="video-poster.jpg" preload="none">
<source src="http://yoursite.com/video.mp4" />
<source src="http://yoursite.com/video.webm" />
</video>
<a class="sublime" href="#video1">Play the video with the ID "video1"</a>
thank you andy! but, i already have the HTML parts working just fine.
just trying to figure out how to activate this via coming in from an external link.
i have 5 or 6 of these video tags & href options that when the user clicks on them in the webpage, they open & play in the lightbox just fine.
but now i need to take the URL (like in your original post above), & put them in an email. so when the user clicks on the link in the email, they will be brought to this webpage & the lightbox would automatically open & start playing that video.
Similar code should work:
// When the video is ready
sublimevideo.ready(function() {
// check if they are at the /#autoplay-video URL
if (window.location.hash == '#autoplay-video1') {
// If so, play the video automatically
sublime('video1').play();
} else if (window.location.hash == '#autoplay-video2') {
// If so, play the video automatically
sublime('video2').play();
}
});
i SO really appreciate your help!!!!!
am getting this error message in the browser console & nothing happens when i go to it... http://principaldatause.org/cs/#video1
[Error] TypeError: 'undefined' is not an object (evaluating 'sublime('video1').play') (cs, line 172)
oh, wait, i must've refreshed before all of your code showed up. lemme try what i see now ;-)
nope, same error. sorry.
You need to replace "video1" with the ID of the video on your page. If you have a video with the ID #my-video
, you need to say sublime('my-video')
.
i did. i just left it "video1" to keep it simple here.
i'll show my code...
--in head--
<script type="text/javascript">
sublimevideo.ready(function() {
if (window.location.hash == '#hills-waite-process') {
sublime('hills-waite-process').play();
} else if (window.location.hash == '#shelby-page-multiple') {
sublime('shelby-page-multiple').play();
}
});
</script>
---in body---
<p class="tools video"><a href="#hills-waite-process" class="sublime" data-autoresize="fit">On using teacher observation data in the teacher evaluation process</a><br />
<span class="clip-reference">Clip from Interview with Gloria Waite, Principal, Hillsborough County Public Schools</span></p>
<video id="hills-waite-process" data-uid="hills-waite-process"
title="On using teacher observation data in the teacher evaluation process"
poster="/assets/images/video-poster.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/Hillsborough-Gloria_Waite/On_using_teacher_observation_data_in_the_teacher_evaluation_process.mp4" /></video>
<p class="tools video"><a href="#shelby-page-multiple" class="sublime" data-autoresize="fit">The value of having multiple measures</a><br />
<span class="clip-reference">Clip from Interview with Shawn Page, Principal, Shelby County Schools</span></p>
<video id="shelby-page-multiple" data-uid="shelby-page-multiple"
title="The value of having multiple measures"
poster="/assets/images/video-poster.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/Shelby-Shawn_Page/The_value_of_having_multiple_measures.mp4" /></video>
ooph, sorry, that looks so messy; i just copy/pasted.
have i worn out my welcome already?
you giving up on me? i understand. no hard feelings. i appreciate the time & expertise you shared thus far.
.:peace:.
andy,
i'm giving up on keeping this window open & refreshing it.
if you ever find it in your heart to complete helping me with this, please shoot me an email. if that's not doable from this website, you can from http://about.me/jasonadair
...because i don't quite "get" this site over others, & haven't figured out how to be notified if you reply.
all that to say, if you don't, i still understand & will not pester you anymore.
thanks again.
.:peace:.