Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Murmur opened this issue Mar 17, 2023 · 3 comments
Open

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

Murmur opened this issue Mar 17, 2023 · 3 comments

Comments

@Murmur
Copy link

Murmur commented Mar 17, 2023

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
Copy link
Owner

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
Copy link
Owner

karl-rousseau commented Apr 16, 2023

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
Copy link
Author

Murmur commented Apr 19, 2023

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');
                    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants