Hide video scrubber and controls for videos casted over AirPlay

Question

I'm looking for a way to cast/share html5 videos over AirPlay without the scrubber and controls displaying on the casted screen. By default, a scrubber and control bar appear for three seconds on every video that's shared over AirPlay, and I don't want those controls to be shown. Is there any way to hide or disable that on the shared screen?

I've tried player.controlBar.progressControl.disable(); but that had no effect. I've even tried play/pausing different segments of a single video using javascript, theorizing that the scrubber only appears when a new video begins playing, but the scrubber even displays on play/pause segments of the same video. Here's what that looks like:

HTML:

    <video class="inlinevid" style="width:250px; height:auto" id="vid1" playsinline preload="auto" x-webkit-airplay="allow">
          <source src="../../../open-content/video/kids-korner-weeds.webm" type="video/webm">
          <source src="../../../open-content/video/kids-korner-weeds.mp4" type="video/mp4">
        </video>
             
    <a id="airPlay" onclick="startVid();">
    <div style="height:50px; background-color:red; color: white; padding: 6px">
    Segment 1 0-10 pause</div></a>
    
    <a id="airPlay2" onclick="vidSeg2();">
    <div style="height:50px; background-color:blue; color: white; padding: 6px">
    Segment 2 10-18 freeze</div></a>
    
    <a id="airPlay3" onclick="vidSeg3();">
    <div style="height:50px; background-color:green; color: white; padding: 6px">
    Segment 3 18-25 loop</div></a>`

JavaScript:

<script>
    function startVid(){
    document.getElementById("vid1").currentTime = 0; 
    vid1.webkitShowPlaybackTargetPicker(); //call target picker by the video id (vid1)
    document.getElementById("vid1").play();
    console.log(vid1.currentTime);
    setInterval(function(){
        if(vid1.currentTime >= 10 && vid1.currentTime < 10.3){
            vid1.pause();}
    },30);

    }
    
    function vidSeg2(){
    document.getElementById("vid1").currentTime = 10.4;
    document.getElementById("vid1").play();
    setInterval2(function(){
        if(vid1.currentTime >= 18 && vid1.currentTime < 18.5){
            vid1.currentTime = 18;} //freeze without pause
    },30);
}
    
    function vidSeg3(){
    document.getElementById("vid1").currentTime = 18.6;
    document.getElementById("vid1").play();
    setInterval3(function(){
        if(vid1.currentTime >= 25 && vid1.currentTime < 25.5){
            vid1.currentTime = 18.6;}  //loop by resetting time
    },30);
}
</script>

Hide video scrubber and controls for videos casted over AirPlay

0 Answers0