Player initialization callback? For doing autoplay/autoplay-mute

Developers Stream
1

I’d like to use something like can-autoplay to mute an autoplay video if necessary.

I’m initializing the Cloudflare player via javascript, so I was looking for some kind of initialization/player-ready hook where I could decide what to do then play() manually. Any tips?

2

I am afraid it is not clear to me what your question is.

Do you want to control whether the video plays automatically? If so the autoplay property should do that trick

3

Here’s a full working example of what I’m talking about:

https://jamiew.github.io/cloudflare-player-tests/callbacks-vs-autoplay-mute.html

Without a callback from the Cloudflare player, I’m forced to use a timeout to trigger playback (unless I’m missing something)

5

I am afraid it still is not clear to me. You want autoplay or not? In either case that setting should allow you to do that, shouldnt it?

6

I do not want to use the autoplay attribute – in 2019 that property no longer behaves consistently.

Sometimes autoplay with sound is allowed, sometimes autoplay is allowed but only if muted, and sometimes autoplay is not allowed at all.

I am trying to use javascript to progressively degrade based on what’s allowed. For more see Autoplay guide for media and Web Audio APIs - Web media technologies | MDN

7

Ehm, that autoplay property is not related to what you posted. It is Stream specific.

8

Can you clarify? Stream seems to just pass the autoplay attribute straight through to the video tag.

Either way my issue is that the simple autoplay property doesn’t work for my use case and I’m looking for a way to hook into Stream’s initialization process so I can do my own autoplay logic

9

@renandincer shared a solution with me – binding to the <stream> element’s durationchange event: Add example on using the durationchange event by renandincer · Pull Request #1 · jamiew/cloudflare-player-tests · GitHub

Thanks!

10

Here’s the full durationchanged hook code, since I might get rid of my repository:

<script>
    // Hey Jamie! - You can listen to the "durationchange" event
    // from us which we fire when we learn about the duration of
    // the video for the first time.
    //
    // I've tried this on FF and Safari both on autoplay allowed
    // and autoplay banned modes. Chrome approaches this in a
    // bit more smart way with the Media Engagement Index at
    // chrome://media-engagement.
    //
    // Using durationchange like this is undocumented and a mini hack.
    // We could fire off another event faster than this one or consider
    // consider your proposed behavior as default behavior for autoplay.
    // We have decided to leave the autoplay decisions to the
    // user agent and keep our player api consistent with the HTML5
    // <video> element for now.
    // You can find the documented events and attributes here:
    // https://developers.cloudflare.com/stream/video-playback/player-api/#events
    //
    let stream = document.getElementsByTagName("stream")[0];
    let eventFired = false
    stream.addEventListener("durationchange", function(){
        if (eventFired) { return }
        eventFired = true
        let video = player.querySelector('video');
        video.play();
    });
  });
  </script>