How to hide beginning and end portions of a VOD content?

[cdongieux]

Hi,

Let's say I have a VOD content (MSS/Dash/whatever) which duration is 1000 seconds. I want the [0;100[ and [900;1000[ portions of this content to be hidden to the user.
Saying it differently: I want the seekbar to go from 0 to 800, and the player to play from 100 to 900 of the VOD content.
Is there a way to do this?

I see in the documentation the config parameters playRangeStart and playRangeEnd.
When setting playRangeEnd to 900, the player behaves exactly as expected: the seekbar goes from 0 to 900, [900;1000[ is hidden.
But when setting playRangeStart to 100 the behavior is not exactly the same: the seekbar still goes from 0 to 900 and the playback starts at 100. Is there a way for [0;100[ to be hidden?

I'm using Shaka Player 2.5.7 with the following code:

var manifestUri =
    'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';

function initApp() {
  // Install built-in polyfills to patch browser incompatibilities.
  shaka.polyfill.installAll();

  // Check to see if the browser supports the basic APIs Shaka needs.
  if (shaka.Player.isBrowserSupported()) {
    // Everything looks good!
    initPlayer();
  } else {
    // This browser does not have the minimum set of APIs we need.
    console.error('Browser not supported!');
  }
}

function initPlayer() {
  // Create a Player instance.
  var video = document.getElementById('video');
  var player = new shaka.Player(video);

  // Attach player to the window to make it easy to access in the JS console.
  window.player = player;

  // Listen for error events.
  player.addEventListener('error', onErrorEvent);
  
  player.configure({
      playRangeStart: 60, // would be 100 in my example
      playRangeEnd: 120, // would be 900 in my example
      
    });

  // Try to load a manifest.
  // This is an asynchronous process.
  player.load(manifestUri).then(function() {
    // This runs if the asynchronous load is successful.
    console.log('The video has now been loaded!');
  }).catch(onError);  // onError is executed if the asynchronous load fails.
}

function onErrorEvent(event) {
  // Extract the shaka.util.Error object from the event.
  onError(event.detail);
}

function onError(error) {
  // Log the error.
  console.error('Error code', error.code, 'object', error);
}

document.addEventListener('DOMContentLoaded', initApp);

Best regards,
Christophe

[joeyparrish]

If you are using the Shaka Player UI, the seek bar will look exactly as you expect. If you use the browser's built-in video controls UI, we don't have any way to restrict it to the range you specified.

For example, here's the range 100-200 applied to a video in our demo app, which uses our custom controls:

Does this help?

[cdongieux]

Hi Joey,

Thanks for taking a look at my question.

OK, I was not using the Shaka Player UI, that's why I didn't have the same behavior as you.

My goal was to use the {playRangeStart: a; playRangeEnd: b} config in a custom CAF Receiver, but I guess it won't work as I expect in the CAF Receiver UI, nor in CAF senders...
Do you have any idea how I could do to hide the beginning and end portions of a VOD content? I was also thinking about tinkering the content manifest, but I would have to do it for both DASH and MSS, I'm afraid it's a bit tricky.

Best regards,
Christophe

[joeyparrish]

The only way to achieve what you want is with custom UI controls (custom meaning not the ones built into the platform/browser). We provide those in the UI library, or you can build your own by overlaying elements on top of the video element and using seekRange to drive the state of the UI.

We do not provide direct support for CAF, but you can reach out to the Chromecast support team for help with that. My team only has the resources and expertise to support direct use of Shaka Player. We do provide an API for both Cast sender and receiver, if you're interested.

[cdongieux]

Hi Joey,

Thanks for your reply.

I know this is not the place to ask for CAF support, I just wanted to proceed in the right order: first check Shaka is able to do what I want (as it is the player used by CAF), then check if I can do it in CAF ; that's why I asked here in a first place.

You say the only way to achieve what I want is through the UI, so you mean using a custom ManifestParser to cut portions of the stream I don't want won't work?

I know you provide an API for Cast Receiver, and I think it will be a great solution for me, but by now it's a bit broken (see #2314 ).

Best regards,
Christophe

[joeyparrish]

You say the only way to achieve what I want is through the UI, so you mean using a custom ManifestParser to cut portions of the stream I don't want won't work?

No, the UI here refers to the on-screen elements that control playback or display state about the playback. A custom ManifestParser would be a component to parse the manifest, such as a DASH MPD or an HLS playlist. You don't need any custom parsers for this.

What you want is a certain way to display certain information. Nothing should show up in the seek bar before the seek range start time.

If you use the browser's built-in controls (video.controls = true or <video controls>, you won't get that. For this, you need custom controls, meaning video.controls = false and you put additional HTML elements on top of the video to take the place of the controls offered by the browser natively.

Our UI library does exactly that.

I don't know CAF's API or it's UI options. I assume the default receiver has some built in UI that you can style in some way, but I'm only guessing.

Does this help?

(P.S. Thanks for pointing out #2314. I'm going to raise the priority of that internally.)

[cdongieux]

I understand but let me explain my thinking: if I use a custom UI on the CAF Receiver to hide [0;playRangeStart] and [playRangeEnd;streamDuration], I'll have to do the same on CAF Senders (so on Android, iOS and HTML5 in my case) as well. However if I manage to control the stream bounds at a lower level (so before the UI kicks in), then I won't have to handle CAF Receiver UI nor CAF Senders UI for this particular use case. That's why I was talking about ManifestParsers.

[joeyparrish]

Ah, okay. I see what you mean now. But I would advise against hacking the manifest parser. Not only is that a hacky solution, but it is not feasible with CAF as far as I know. CAF doesn't seem to provide direct access to Shaka Player.

This is a fairly simple UI issue, which we've already solved to the extent we can (HTML5, the scope of this project). If you have 3 different custom UIs, you'll have to handle it 3 times. Even if you use Shaka Player & its UI directly for casting instead of using CAF, you'll still have adjust your UI on Android & iOS.

[shaka-bot]

@cdongieux Does this answer all your questions? Can we close the issue?

[cdongieux]

Hi,

Thanks a lot Joey for your explanations and advices. You can close this issue.

Best regards,
Christophe

[joeyparrish]

Will do. Let us know if you can do anything else to help.