videojs/videojs-contrib-ads

A Tool for Building Video.js Ad Plugins

videojs-contrib-ads provides common functionality needed by video advertisement libraries working with video.js. It takes care of a number of concerns for you, reducing the code you have to write for your ad plugin.

videojs-contrib-ads is not a stand-alone ad plugin. It is a library that is used by other ad plugins in order to fully support video.js. If you want to build an ad plugin, you've come to the right place. If you want to play ads in video.js without writing code, this is not the right project for you.

Maintenance Status: Stable

Benefits

• Ad timeouts are implemented by default. If ads take too long to load, content automatically plays.
• Player state is automatically restored after ad playback, even if the ad played back in the content's video element.
• Content is automatically paused and a loading spinner is shown while preroll ads load.
• Media events will fire as though ads don't exist. For more information, read the documentation on Redispatch.
• Useful macros in ad server URLs are provided.
• Preroll checks automatically happen again when the video source changes.

Documentation

Documentation Index

Release History

A short list of features, fixes and changes for each release is available in CHANGELOG.md.

License

See LICENSE.

videojs-contrib-ads's Issues

advice for ad implementors and out-of-band src changes

After an ad implementation has called startLinearAdMode() to take control of the player, it is responsible for out-of-band changes to the player state.

For example, consider a playlist player, where one content video follows another in a series. If the viewer clicks "next" during an ad, what should happen? It's up to the ad implementation to handle this case.

Currently the example ad integration does not handle this case at all. We should establish guidelines for ad implementation providers, and then follow those guidelines ourselves in the example ad integration.

example midrolls don't play on Safari

In Safari on Mac (not iOS), midrolls don't play. When the midroll time position is hit in the example (15 sec), the example ad integration tries to set the src of the player with the video.js API player.src().

However, this call silently fails and the main content video continues to play, even though the player goes into ad mode (for instance, showing a yellow progress bar).

None of the following attempts in the example have helped:

• using player.paus() to pause the video before setting the src,
• making the inventory src absolute prior to setting it (as opposed to the default, relative paths),
• setting the src to the empty string before setting it to the actual URL
• setting the src directly on the <video> tag itself (player.el().querySelector('.vjs-tech'))
• setting the src via setAttribute() on the <video> tag itself.
• using setTimeout() to delay setting the src.
• using setTimeout() to delay calling player.play() after setting the src.

Strangely, the set src button does succeed in setting the video src, even though all of the above mechanisms fail.

No loading spinner after the preroll ad has finished and before the actual content starts.

All of the following concerns only the HTML5 version. I haven't tested the flash fallback.

Here is how to reproduce it:

1. open the example page (the one under example/index.html) with chrome
2. while the preroll add is still playing enable device mode in the chrome dev tools and set network throttling to GPRS (or similar)
3. After the preroll ad finishes the poster is displayed but there is no spinner to indicate that new content is being loaded. This confuses users that are on a slow connection into thinking that they should click the post for the video to start or that the video stream is down.

Expected behavior:
The usual videojs loading spinner should be shown indicating that a new video stream is being loaded.

function remoteTextTracks renamed

Hi, as user mcountis found out, the function remoteTextTracks() in videojs, has been renamed in textTracks().
Using IMA plugin, this issue prevents the ui elements (countdown/progress bar) and controls of the AD to play properly. (In my case).

Fail to running example videojs-contrib-ads.

Fail to running example videojs-contrib-ads.
I'm download videojs-contrib-ads. I running it in my localhost. But it is not working. I have some error like this.

Uncaught ReferenceError: videojs is not defined
example-integration.js:127 Uncaught ReferenceError: videojs is not defined
localhost/:47 Uncaught ReferenceError: videojs is not defined

How to fix it?

example ads don't play on Firefox

When trying to play the example ads implementation in the example/ directory, something strange happens in Firefox.
The example ads integration correctly retrieves the inventory.json file, but then fails to play the ad creatives.

In Firebug, I see a 404 for this URL: http://localhost/checkout/videojs-ads/example/null

Maybe it's a string concatenation issue. Not sure why it only happens in Firefox and not Chrome or iOS/Safari.

fallback src types

how do you decide which format to serve as the ad? do i need to browser detect inside of player.ad() in order to help me choose which file to give to player.src()?

Add a video with two prerolls to the examples

Please write an example of two video prerole.

Insight on `adend`, `adended`, and `ended`.

Can anyone provide insight to the following events—How they get called and when?

• adend
• adended
• ended

Where does the 'ed come from?

It looks like adended gets fired when an any src finishes during startLinearAdMode().

It looks like adend gets fired when you fire endLinearAdMode(). This seems to only change the state to content-resuming.

I am not sure when ended gets fired, but it seems like all plugin events are registered upon instantiation (and are not dynamic)…

player.on('ended', function () { console.warn('ended 1'); }); // fires on ad end

player.ads();

player.on('ended', function () { console.warn('ended 2'); }); // does not fire on ad end

---

This begs the question…

How does this integrate with endcard's?

player.on('ended', function () {
    // showEndcard();
});

---

Anyways, atm I am just:

1. Register ads for preroll—hope no one sets ended event before me
2. Register endcard—sets ended event
3. Register src—utilizes ended event

The only thing I don't like is the dependency order requirement that get created due to these events.

Post Roll Handling

Hi guys,

I just wondered if you have planned to handle post roll advertising in a coming version?
Sounds like something obvious and if you already answered to this question before, please forgive me in advance.

Thanks

Nicolas

Video does not resume on Android

On Android (tested on Moto X, 4.4.4, Chrome 38) the video will not resume/start after ad playback. This is because tech.seekable.length can remain 0 even though a source is set and playable, and tech.readyState is 4 (HAVE_ENOUGH_DATA).

Is there a situation where tech.readyState couldn't be used to test the playable state in tryToResume()?

v0.4.0 breaks the example

Your example code no longer plays an ad with the latest v0.4.0 code.

Please advise.

How to hide controls bar while playing video ads

Can i hide controls bar while playing video ads.

Mid-rolls need to be loaded from the beginning?

Hey guys, so this seems somewhat apparent from the state diagram, but I wanted to confirm whether it is the case.

So imagine that you want to use different ads on each scheduled mid-roll. One approach would be to load each ad (i.e. retrieve ad media source and metadata from the ad server) right before it is scheduled to play. This would distribute the loading time between each mid-roll instead of having a longer initialization time.

From what I've seen, this library doesn't currently allow you to trigger a "loading" state, similar to what happens right after contentupdate, so if you wanted to play a mid-roll you would need to have all the relevant metadata loaded by that point and then you would call ads.startLinearAdMode(). Is this correct? If so, is there a reason why ad loading is constrained to initialization time? Thanks

Add an `adscanceled` transition events from `ads-ready` and `preroll?` in the FSM

Proposal

The FSM should include an adscanceled event to leave the ads-ready and preroll? states.

Reason

Lets assume there's a playlist plugin loaded. At any given time, a "play the next item" event could be triggered. From a UX perspective, the AD integration should immediately drop out of playing or loading the AD to fulfill the request. However, if you're in the ads-ready state, your only immediate option is to trigger an adserror. If you're in the preroll? state, you can trigger a adtimeout or adserror, but it feels like adscanceled is most appropriate.

Latest version of videoJs (4.11.4) fails with version 1.0.0 of videojs-contrib-ads

I have updated from version 0.5.0 of videojs-contrib-ads to 1.0.0 and I get an error on getPlayerSnapshot

on line 149 of videojs.ads.js

 tracks = player.remoteTextTracks(),

I have not been able to find this function 'remoteTextTracks' on the latest version of the player (4.11.4) or in any previous versions.

I imagine that if it had to exist, it should be defined in https://github.com/videojs/video.js/blob/master/src/js/tracks.js but I could not find it.

Update proposal in the Migration guide

At the end of the migration guide, it says:

The extended support for postrolls added a new `postrollTimeout` option, similar to prerolls.
If you do not wish to play a postroll for a video, you can fire `adtimeout` to proceed to the next video immediately.

I thing there is an even easier way to disable postroll ads. You just have to add the 'postrollTimeout' option with 0 value and that will do the trick.

I was going to do a PR but thought it may be worth it to discuss it first just in case.

Resume m3u8 playing after ad showing

After eb57aba commit m3u8 stopped to resume playing after showing ad. I'm using flashhls videojs plugin + vast plugin(updated to work with current contrib-ads) and contrib-ads from current master git. Before that commit resuming worked well.

I guess the problem is that contentcanplay did not fire in case of m3u8 use. But contentloadedmetadata event fired well.

Will check with the currnet contrib-hls and post results too.

With regards, Andrey.

Bug: playback always resuming after postroll

in the resume function inside the restorePlayerSnapshot there is a fix for iOS 8.1 (ended event not firing when seeking to the end)

This fix however causes the video to resume playback always even after returning from a postroll even if snapshot.ended == true

      // finish restoring the playback state
      resume = function() {
        var
          ended = false,
          updateEnded = function() {
            ended = true;
          };
        player.currentTime(snapshot.currentTime);

        // Resume playback if this wasn't a postroll
        if (!snapshot.ended) {
          player.play();
        } else {
          // On iOS 8.1, the "ended" event will not fire if you seek
          // directly to the end of a video. To make that behavior
          // consistent with the standard, fire a synthetic event if
          // "ended" does not fire within 250ms. Note that the ended
          // event should occur whether the browser actually has data
          // available for that position
          // (https://html.spec.whatwg.org/multipage/embedded-content.html#seeking),
          // so it should not be necessary to wait for the seek to
          // indicate completion.
          window.setTimeout(function() {
            if (!ended) {
              player.play();
            }
            player.off('ended', updateEnded);
          }, 250);
          player.on('ended', updateEnded);
        }
      },

I don't understand why there is this iOS 8.1 Seeking fix inside the resume function for restoring the snapshot, but I guess a simple fix would be to on set the timeout if snapshot.ended == false?

Bower?

Could you add a bower.json file to this repo and register it? That way it'll be easier to manage for projects using a lot of client-side libraries.

If a try set play two prerolls, playbeck snapshot for second preroll created wrong

If a try play two video in prerolls, playback snapshot for second preroll created wrong, because it contains information about the first video preroll.

example ads don't play in IE8

example ads don't work with flash - tested in IE8. Is there any information on browser support for this plugin?

example ads don't play on mobile devices

In testing the example ad implementation across our supported device matrix, it's clear that the example ad integration does not work on many mobile devices.

The example ad integration should work on our supported device matrix.

how load video ads , waiting skip 5s , then load video youtube playing ?

how load video ads , waiting skip 5s , then load video youtube playing ?

add description to package.json

Since the package.json lacks a description, it's pulled from the first sentence of the Readme for display on npmjs.org. Instead, add a description to the package.json.

Releasing this change means bumping the minor version and publishing to npm.

HLS or Youtube causes midroll AD to not resume content playback

I am trying to use the ads plugin to play midroll ads in mp4, HLS, and Youtube videos.

Playing mp4 files with ads is working fine but I have problems with HLS and Youtube:

• HLS videos don't get their content length reset and sometimes playback doesn't start again.
• Youtube videos loses Video JS skinning and doesn't start again.

Demo

I have made examples of the problems here:

Online

http://gotling.github.io/videojs/ads-hls-youtube.html

Code

https://github.com/gotling/video-js-hls-youtube/
Specifically see ads-hls-youtube.html

Versions

videojs-4.12
videojs-contrib-ads-2.1.0
videojs-contrib-hls-0.12.0
videojs-contrib-media-sources-0.3.1
videojs-youtube-1.2.10

Browsers tested

Mac OS 10.10.2

Chrome 42.0.2311.90
Firefox 37.0.1
Safari 8.0.4

Support HLS and dash

I add videojs-contrib-hls library to your example, when run example:

• Run success with mp4 type
• When run with source type dash or hls, the event "contentupdate" always show when load page finish with contents:
  [1425893852266] contentupdate:
  oldValue: http://222.255.37.148/film.m3u8
  newValue: blob:http%3A//localhost%3A3000/ffc45305-8c95-459f-967d-804bb082cf8f
  player can't play anything when ads finish playing. I don't know why src of player changed to invalid link??

I have a question: videojs-contrib-ads support HLS and dash type???

Video could not be loaded after showing ad

Little confused by the following: same content used in both players on this sample page. Only difference is that the first is calling a pre-roll test ad from DFP-SB. If you skip the ad then the video fails to play with the message 'The Video could not be loaded, either because the server or network failed or because the format is not supported' yet the same video plays just fine in the player immediately below.

https://dl.dropboxusercontent.com/u/19845240/v.html

Any thoughts on what is happening here?

When calling player.ads() autoplay does not work anymore and click to play requires two clicks

http://192.237.149.165/video/demo/video.html

not sure if im doing something wrong but if i have the player.ads() call in my videojs callback function then it seems like it breaks the click to play functionality. If i set autoplay to true then it still requires a click... am i missing something?

How do you distinguish between postroll ended and main content ended?

I'm having a tough time being able to distinguish between my video ending and any of the ads ending. They all seem to fire an 'ended' event.

Update bower version from 0.2.0 to 1.0.0

Hi guys
I just realized that bower version is 0.2.0 but the latest release is 1.0.0
It may be good to update the version number in bower.json

How skip before prerol timeout?

How skip before prerol timeout?

[YouTube/Google] ads are not loaded, VIDEOJS crash

when you try to load this:
http://nhanhoasolutions.com/tam/html/ima/tam.html

VIDEOJS: ads content-set -> ads-ready?
VIDEOJS: ads ads-ready? -> ad-timeout-playback

the main problem appears to be whenever this is loaded:
http://imasdk.googleapis.com/js/sdkloader/ima3.js
it sends the video ads to the client, in this case the browser but they are not shown because VIDEOJS already crashed so you have to refresh the page or click the play triangle twice in order to see the ads

so in my conclusion google/youtube is taking so much time to send the video ads or at least more time than videojs.ads.js:275 appears to wait for them so it triggers an error and crash. After this if you click the play triangle twice or refresh the page it already has the ads so it doesn't trigger the error.

maybe the solution could be changing the 5000 for 7000 or adding an extra Timeout layer... thanks

original reported by: @seekerquoc

vjs-play-progress width: 39944.01%?

Hi

I play live rtmp stream, and after ads play end, i have progress bar overflow.

<div class="vjs-play-progress" style="width: 41504.91%;"><span class="vjs-control-text"><span>Progress</span>: 0%</span></div>

I think ads plugin calculate position from 0:00:00 after ads ends, but live stream is started / continued from 1:10:55

contentupdate event not firing

The videojs-ads plugin doesn't actually trigger the contentupdate event as described in the documentation.

When an ad isn't playing, and the video.js source is set to something new, fire contentupdate so ad integration implementations can respond to the new content media.

Once this issue is fixed, remove the note in the README pointing to this issue.

Proposal for Generic Ad Info and Events

Background:

Each ad provider emits a unique set of events. Typically, these events are used to track the state of ad playback for metrics purposes and to create custom UI's. However, the names of these events and the data exposed in them can be wildly different from one provider to the next not to mention the differences from the same provider across techs (flash vs. html). This means that custom UI's need to be built differently for each ad provider you work with and often each tech for that provider as well.

Proposal:

By defining a common set of events and objects that ad poviders can integrate with in contrib-ads, custom UIs and analytics providers can be provider agnostic.

Events:

ads-request Fired when ad data is requested.
ads-load: Fired when ad data is available following an ad request.
ads-pod-started: Fired when a LINEAR ad pod has started.
ads-pod-ended: Fired when a LINEAR ad pod has completed.
ads-allpods-completed: Fired when all LINEAR ads are completed.
ads-ad-started: Fired when the ad starts playing.
ads-ad-ended: Fired when the ad completes playing.
ads-first-quartile: Fired when the ad playhead crosses first quartile.
ads-midpoint: Fired when the ad playhead crosses midpoint.
ads-third-quartile: Fired when the ad playhead crosses third quartile.
ads-pause: Fired when the ad is paused.
ads-play: Fired when the ad is resumed.
ads-mute: Fired when the ad volume has been muted.
ads-click: Fired when the ad is clicked.

Provider Info:

player.ads.provider = {
  "type": `String`,
  "event": `Object`
}

Ad Info:

player.ads.ad = {
  "type": `String`,
  "index": `Number`,
  "id": `String`,
  "duration": `Number`,
  "currentTime": `Function`
}

Ad Grouping (pod) Info:

player.ads.pod = {
  "id": `String`,
  "duration": `Number`,
  "size": `Number`,
  "currentTime": `Function`
}

Guidelines

• Everything but player.ads.provider.type is undefined during content-playback.
• The type of ad should be one of 'PREROLL', 'MIDROLL', 'POSTROLL'
• All objects and properties should be considered read-only to everyone but the ad providers.

Preroll for encrypted media.

Many of the plugins for videojs seem out-of-date and I suspect the same for videojs-preroll.

Thusly, I figured I would just tap into the default preroll provided by videojs-contrib-ads.

window.player = videojs('player', {
    controls: true
}, function () {
    this.ads();

    this.on('contentupdate', function () {
        player.trigger('adsready');
    });

    this.on('readyforpreroll', function () {
        this.ads.startLinearAdMode();

        this.src('http://example.com/example.mp4');

        // not sure if this is needed
        this.one('durationchange', function () {
            this.play();
        });

        this.one('adended', function () {
            player.ads.endLinearAdMode();
        });
    });
});

Anyways, the default implementation looks fine and dandy for prerolling a clip, but for embedded content not everything gets carried over…

https://github.com/videojs/videojs-contrib-ads/blob/master/src/videojs.ads.js#L153

snapshot = {
    ended: player.ended(),
    src: player.currentSrc(),
    currentTime: player.currentTime(),
    type: player.currentType()
};

The snapshot of the current player doesn't carry over keySystemOptions to be passed to…

https://github.com/videojs/videojs-contrib-ads/blob/master/src/videojs.ads.js#L316

// if the src changed for ad playback, reset it
player.src({ src: snapshot.src, type: snapshot.type });

See: https://github.com/videojs/videojs-contrib-dash

player.src({
    src: 'http://example.com/my/manifest.mpd',
    type: 'application/dash+xml',
    keySystemOptions: [{
        name: 'com.widevine.alpha',
        options: {
            licenseUrl: 'http://m.widevine.com/proxy'
        }
    }]
});

Currently the only way I see getting keySystemOptions would be to access player.tech.currentSource_.keySystemOptions which is https://38.media.tumblr.com/avatar_3264e03aabff_128.png.

Since this is crossing between tech and plugin… Any recommendations?

missing ad content causes choppy playback

If an ad implementation calls startLinearAdMode() and then calls endLinearAdMode() without actually playing a linear ad in between, the player gets into a weird state where it plays the content video, but it's extremely choppy. It's as though the content is being rapidly play/pause'd.

Make sure that calls to endLinearAdMode() don't break content playback, even if no ad content was actually played.

Patch to fix some issues

I had some issues:
a) If the VAST file was empty (or 404 not found), the player remaind 'paused' and the ad-state was 'ad-timeout-playback'. This happend within the "adtimeout"-event during the 'ads-ready?'-state.
I have removed the state 'ad-timeout-playback' - as it is not clear to me. Instead I forced to player to start playing the video.
b) IE7 did not play video

*** videojs-contrib-ads/src/videojs.ads.js      2014-09-10 19:21:08.635727010 +0200
--- videojs.ads.js      2014-09-10 19:40:52.531674227 +0200
*************** var
*** 314,319 ****
--- 314,320 ----
                },
                'play': function() {
                  this.state = 'ads-ready?';
+                 this.snapshot = getPlayerSnapshot(player); // I have no glue why IE7 needs this line to play the video...
                  cancelContentPlay(player);

                  // remove the poster so it doesn't flash between videos
*************** var
*** 374,379 ****
--- 375,384 ----
              },
              leave: function() {
                window.clearTimeout(player.ads.timeout);
+ 
+               clearImmediate(player.ads.cancelPlayTimeout);
+               player.ads.cancelPlayTimeout = null;
+ 
                removeClass(player.el(), 'vjs-ad-loading');
              },
              events: {
*************** var
*** 384,408 ****
                  this.state = 'preroll?';
                },
                'adtimeout': function() {
!                 this.state = 'ad-timeout-playback';
!               }
!             }
!           },
!           'ad-timeout-playback': {
!             events: {
!               'adsready': function() {
!                 if (player.paused()) {
!                   this.state = 'ads-ready';
!                 } else {
!                   this.state = 'preroll?';
!                 }
!               },
!               'contentupdate': function() {
!                 if (player.paused()) {
!                   this.state = 'content-set';
!                 } else {
!                   this.state = 'ads-ready?';
!                 }
                }
              }
            },
--- 389,396 ----
                  this.state = 'preroll?';
                },
                'adtimeout': function() {
!                 this.state = 'content-playback';
!                 player.play();
                }
              }
            },

ad with different tech than main video doesnt work

So I've got this case where I want to use the YouTube tech to play a YouTube video, and have a preroll at the same time. The problem is that after the preroll plays (which plays in html5 tech), the video crashes, because the ads plugin tries to set the src back without checking if the ad tech is different than the main tech.
I've written a nice patch which solves this, but the problem is that it uses the player.techName property and player.loadTech method, both which are not available in the minified version of video.js

Any thoughts on how to go towards solving this?

how to add functionality of skip the ads

I want to have the functionality of skiping the ad. how can i do this?

.vjs-has-started class not being added to the player when the ad plays

Hi guys

I have migrated from 1.1.0 to 2.1.0 and one of the biggest issues that I found was that the class
'vjs-has-started' was not added to player when the ad was playing.

This prevented the poster from disapearing when the ad was playing and the control bar from appearing and disappearing (when the user was active or inactive).

In the end I had to ad the following styles to my css

.vjs-ad-playing .vjs-poster {
  display: none;
}

/* Show the control bar only once the video has started playing */
.vjs-ad-playing .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */

  visibility: visible;
  opacity: 1;
  /* transition */
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}

/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-ad-playing.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}

I think we should add the previous styles to the plugin (they are pretty much copy pasted from vjs default skin) or investigate why the class 'vjs-has-started' is not being added to the player.

Needs more documentation, particularly re: adstart and adend events

The title says it all.

video fails to play an ad

Pull down videojs-ads and run a server to launch the example in the example/ directory.
Open it in a browser and Click play.

Expected:
Preroll plays, then video plays

Actual:
Preroll fails to play, and video never starts. The screen only shows the spinning buffer icon.

Beginning of stream after seeking past midroll

Str: Safari
Defaults except html5 only tech for both ads and main content
Midroll ad with hls main content
Seek past the ad

Expected:
After midroll- main content resumes from wherever the user seeked to.

Actual:
Afterfter the ad finishes you see the very beginning of the stream again- for a split second. After that main content resume from wherever the user seeked to

How to configure this plugin without mid roll ads

You have designed great plugin for playing video ads.

I need a plugin with videojs which can support only pre and post roll ads.
so can you tell me how to configure your plugin with only pre and post roll without mid roll.

Thanks in advance

CSS

".vjs-ad-playing.vjs-ad-playing ..." is strange: twice ".vjs-ad-playing"

magic numbers should be configurable

The algorithm for setting the current time has two magic numbers:

• the number of times to retry when attempting to set the currentTime (20)
• the number of milliseconds to wait between attempts (50)

Both of these numbers should be config options and documented.

state diagram out of date

The state diagram (PNG) showing the ad plugin behavior is out of date. The terms "Ad Framework" and "Ad Plugin" are misleading—the former should be "Ad Plugin" and the latter should be "Ad Integration".

Once the PNG is updated, also update the README sentence where these terms are referenced:

The timeline at right shows how the ads plugin (labeled "Ads Framework" on the left) communicates with your integration (labeled "Ads Plugin" on the right).

Patch to fix IE7

Hello,

A change from 0.2.0 to 0.3.0 broke IE7.
This revert fixes this isuse:

*** videojs.ads.js-old  2014-09-09 18:52:28.151655798 +0200
--- videojs.ads.js      2014-09-09 18:52:58.203654458 +0200
*************** var
*** 296,301 ****
--- 296,302 ----
                },
                'play': function() {
                  this.state = 'ads-ready?';
+                 this.snapshot = getPlayerSnapshot(player);
                  cancelContentPlay(player);

                  // remove the poster so it doesn't flash between videos