karl-rousseau / HybridTvViewer

[WIP] Web extension making Firefox & Chrome emulate iTV webpages instead of downloading them.
MIT License
67 stars 25 forks source link

Hbbtv "video/broadcast" not working in Chrome, Firefox works #41

Open Murmur opened 1 year ago

Murmur commented 1 year ago

Chrome is unable to mockup video/broadcast object but Firefox works. Latest browsers in Win10.

Simple test app, bottom right corner should run video.mp4 placeholder. https://refapp.hbbtv.org/dash/broadcast-object/broadcast-object.html <object type="video/broadcast" id="broadcastVideo"> </object>

karl-rousseau commented 1 year ago

Thanks for this report and I will investigate.

Previously at the beginning of this extension, it was only working under Firefox (as main targeted platform) and not tested that much on Chrome/Opera/Edge now based on Chromium codebase. And I assume that under latest Win10, you are now testing with Edge. I will try.

karl-rousseau commented 1 year ago

After testing this page, I can see inside the DevTools console that Chrome has a certificate issue with the site holding the mp4 example and moreover it needs a user click to unlock the video playback as indicated in the error message DOMException: play() failed because the user didn't interact with the document first. It is tricky to fix right now.

In the meantime, I found a quick solution by replacing line 562 (holding the video url http://clips.vorwaerts-gmbh.de/VfE_html5.mp4) inside js/hbbdom.js with those lines:

                        var sourceTag = document.createElement('source');
                        sourceTag.src = localStorage.getItem('tvViewer_broadcast_url') || 'https://www.w3schools.com/html/mov_bbb.mp4';
                        sourceTag.setAttribute('type', 'video/mp4');
                        videoTag.appendChild(sourceTag);
                        videoTag.onclick = function() { videoTag.muted=true; videoTag.play();  };

Then you will be able to see the new https video rendered and when clicking on it, it will play properly.

I hope in the future that I will be able to replace the standard video tag with a WebAssembly video player which will not have those browser tricks to handle.

Murmur commented 1 year ago

Thanks, I did the same changes on a local files but Chrome(win10, latest chrome) does nothing. Firefox works fine with the same extension app folder.

Error in chrome console so my version is semi broken at the moment, downloaded the fresh github+applied videoTag+sourceTag changes, Chrome able to playback a broadcast video placeholder. Thanks, I fill study my version what I did in a source codes. (edit) it was a leftover typo in manifest_chrome.json file I did earlier. Chrome videobroadcast is now ok, click-to-play is actually a good for development.

Bottom-right corner should have a broadcast video. https://refapp.hbbtv.org/dash/broadcast-object/broadcast-object.html

injecting  HbbTV  1.5 
broadcastObject.initialize TypeError: broadcastObject.videoObj.bindToCurrentChannel is not a function
    at Object.initialize (broadcast-object.js:8:38)
    at start (broadcast-object.js:64:33)
    at onload (broadcast-object.html:16:25)

Changes in hbbdom.js, line 558

                    if (!isVideoPlayerAlreadyAdded) {
                        var videoTag = document.createElement('video');
                        videoTag.setAttribute('id', 'video-player');
                        //videoTag.setAttribute('autoplay', ''); // note: call to bindToCurrentChannel() or play() is doing it
                        videoTag.setAttribute('loop', '');
                        videoTag.setAttribute('muted', 'true');                     
                        videoTag.setAttribute('style', 'top:inherit; left:inherit; width:inherit; height:inherit;');
                        var sourceTag = document.createElement('source');
                        sourceTag.src = localStorage.getItem('tvViewer_broadcast_url') || 'https://www.w3schools.com/html/mov_bbb.mp4';
                        sourceTag.setAttribute('type', 'video/mp4');
                        videoTag.appendChild(sourceTag);
                        videoTag.onclick = function() { videoTag.muted=true; videoTag.play();  }
                        oipfPluginObject.appendChild(videoTag);
                        //console.info('BROADCAST OR BROADBAND VIDEO PLAYER ... ADDED');
                    }