cjzsnq
Last Updated: February 25, 2016
·
2.105K
· andyfleming

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

4 Responses
Add your response

15989

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

over 1 year ago ·
15991

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>
over 1 year ago ·
15994

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();

    }

});
over 1 year ago ·
15998

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').

over 1 year ago ·