Weird interaction with Picture-in-Picture

GrandmasterB42 commented 8 months ago

I was trying to add Picture-in-Picture support to a video element. But the website would always "crash" with STATUS_ACCESS_VIOLATION.

I tried reproducing this issue with just plain html, and it didn't seem to happen

It seems to only happen when htmx loads the element containing that functionallity and I couldn't find any other cause after hours of debugging, which is why I am here now.

In the example provided below, the Picture-in-Picture button on the upper element works just fine, while the section loaded at runtime by htmx causes the error or freezes the site. I tested this on Chrome and Edge on Windows 10, all should be the current newest stable release.

Thanks in advance for helping!

The video source I used is the media of the day from wikimedia as I didn't know where else to take a video for this from

Basic backend in Rust, htmx.js contains htmx 1.9.10

use axum::{response::Html, routing::get, Router};

#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/", get(Html(include_str!("../vid.html"))))
        .route("/inner", get(Html(include_str!("../inner.html"))))
        .route("/htmx", get(include_str!("../htmx.js")));

    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000")
        .await
        .unwrap();

    axum::serve(listener, app).await.unwrap();
}

vid.html

<html>

<head>
    <script src="/htmx"> </script>
</head>

<div>
    <h1> This was loaded by the browser </h1>
    <div>
        <video id="video" controls autoplay>
            <source
                src="https://upload.wikimedia.org/wikipedia/commons/transcoded/9/9e/L%C3%ABtzebuerger_Volleksdanz_30-09-2023.webm/L%C3%ABtzebuerger_Volleksdanz_30-09-2023.webm.720p.vp9.webm">
        </video>
        <button id="PIP">PIP</button>
    </div>

    <script>
        const video = document.getElementById("video");
        const button = document.getElementById("PIP");

        button.addEventListener("click", () => {
            video.requestPictureInPicture();
        })
    </script>
</div>

<div>
    <h1> This was loaded by htmx </h1>
    <div hx-get="/inner" hx-swap="outerHTML" hx-trigger="load"> </div>
</div>

</html>

inner.html

<div>
    <div>
        <video id="video1" controls autoplay>
            <source
                src="https://upload.wikimedia.org/wikipedia/commons/transcoded/9/9e/L%C3%ABtzebuerger_Volleksdanz_30-09-2023.webm/L%C3%ABtzebuerger_Volleksdanz_30-09-2023.webm.720p.vp9.webm">
        </video>
        <button id="PIP1">PIP</button>
    </div>

    <script>
        const video1 = document.getElementById("video1");
        const button1 = document.getElementById("PIP1");

        button1.addEventListener("click", () => {
            video1.requestPictureInPicture();
        })
    </script>
</div>

croxton commented 8 months ago

Likely related to this issue when swapping the <video> element: https://github.com/bigskysoftware/htmx/issues/764

croxton commented 8 months ago

You may find something this works to recreate the shadow dom:

let video1 = document.getElementById("video1");
video1.replaceWith(video1.cloneNode(true));

GrandmasterB42 commented 8 months ago

Thank you very much, this worked!

bigskysoftware / htmx