Tvheadend

Your first example http://192.168.0.4:9981/stream/channelid/UUID?profile=htsp works for me with wget, however I'm using TVH with user authentication effectively turned off (the "*" user can do anything provided he's on the local subnet).

One quirk in the code I've spotted: if the streaming profile specified doesn't exist or is invalid or not allowed, the htsp profile is used instead. Only if htsp can't be used do you get an error.

The channelid URL never starts playing in the JS video element. That's why I was wondering if I can use the stream/channel URL with a ticket parameter instead.
But I am just as happy if I can get the channelid URL to work instead.
Maybe I am wrong about trying to set the channelid URL to a Javascript element. I am not sure if that is possible.
My code is as follows:

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');

    source.src = src;
    source.type = type;

    element.appendChild(source);
}
addSourceToVideo(document.getElementById('vid'), 'http://192.168.0.4:9981/stream/channelid/UUID?profile=htsp', 'video/webm');

I have checked different values for the type attribute, but no luck.
The "vid" element is a video tag inside my webpage:

<video id="vid">
</video>

The code gets executed without any JS errors (I can check that via the Debug Console), but nothing happens in the video element on the page and I do also not see any traffic about it in the network tab of the Debug Console.

I wonder if this can even work as I am simply using the plain URL without any token from the digest authorization. I more or less expected to get a 401/unauthorized response from TVH but instead I don't see anything.

The video element on the webpage stays dark and nothing happens even if I click the "play" button manually.

I've never used HTML5 video so can't help there. However you could narrow down the search for the problem by first copying part of the stream to a local file and then trying to view that through your JS.