Create player component `video-moq` #10

emilsas · 2024-11-28T10:34:40Z

Following the idea of issue #4, to decouple the player from the web application and improve modularity, we can create a WebComponent for the player. This approach ensures the player is fully encapsulated, making it reusable across different web pages and projects without dependencies on the current application structure.

In my mind the WebComponent <video-moq></video-moq> should implement and follow same logic of the classic <video> tag, may be in a first iteration we can focus in implement the most important ones.

From a user perspective I would imagine using the component like this (insipred in hls.js):

Basic Usage

<script src="https://some/cool/cdn/moq-js.js"></script>
<html>
   <body>
      <video-moq id="video" autoplay muted controls src="https://url/to/moq/catalog"></video-moq>
   </body>
</html>

Advanced Usage

<script src="https://some/cool/cdn/moq-js.js"></script>
<html>
   <body>
      <div id="video" autoplay muted controls src="https://url/to/moq/catalog"></div>
      <script>
         var video = document.getElementById('video');
         var videoSrc = 'https://url/to/moq/catalog';
         var player = new MoqPlayer();
         player.load(videoSrc);
         player.attachMedia(video);
         // After that you will get full control to player change tracks, volume, etc.
      </script>
   </body>
</html>

List of attributes to implement

Taken from <video>: The Video Embed element.

src
width
height
controls
autoplay
muted
poster

Possible implementation

The new WebComponent <video-moq> will render the canvas element to display de video and in the future with #7 we can overlay the controls if the attribute is set. For this we can reuse the whole library implemented here to control the video itself, so importing the script of the player will result in having the <video-moq>component and MoqPlayer class for advaced usaged exported.

The text was updated successfully, but these errors were encountered:

englishm · 2024-12-03T23:36:46Z

I really like this idea. (See: #4 (comment)) Thanks for writing it up!

santipuppoQualabs · 2024-12-09T22:39:55Z

Working on this btw!

…is commit should be reverted before merging.

… in plain JS

santipuppoQualabs · 2024-12-10T12:48:31Z

Opened a draft PR here. Open for suggestions/corrections

…diaElement naming

…them to dom if no attribute is present. Added mute attribute like in <video> tag

… namespace and fingerprint as attributes or have them included as query params in the src attribute

… present as an attirubte. Also renamed variables to #element

…atch tsx. Style tbd

…me attributes

santipuppoQualabs · 2024-12-18T19:54:19Z

Opened the PR so we can merge what we have now and keep working from there (Anyone feel free to review). I see there are some new features to be merged which we should include in the web component. There is also some other work to be done listed in the PR which did not seem worth it to delay the merge for. I'll be writing up some new issues with these points

nicolaslevy · 2025-01-16T18:46:08Z

Note from our meeting: This can be the starting point for a samples page like the dash.js one

Issue #10 - Web component

nicolaslevy · 2025-01-23T19:30:41Z

Merged in #16

This was referenced Nov 28, 2024

Refactor repo structure to keep the player as a main component #11

Closed

Decouple the Player from the Web Application #4

Closed

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 9, 2024

Feat englishm#10: Added temporary workspace to host web component. Th…

13daae8

…is commit should be reverted before merging.

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 9, 2024

Feat englishm#10: Added auto generated web component draft.

875482d

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 9, 2024

Feat englishm#10: Added config to run on https as in web workspace

a8ed3c2

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 9, 2024

Feat englishm#10: Added web component code replicating UI work so far…

20dffae

… in plain JS

santipuppoQualabs mentioned this issue Dec 10, 2024

Issue #10 - Web component #16

Merged

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 10, 2024

Feat englishm#10: Renamed player-component to video-moq

950b54f

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 10, 2024

Feat englishm#10: Added height, width and aspect-ratio attributes

80ebe4f

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 10, 2024

Feat englishm#10: Deleted main.ts and moved style to video-moq.css

be369fc

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 10, 2024

Feat englishm#10: CSS and comments cleanup

56ce720

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 11, 2024

Feat englishm#10: Added play() and pause() functions to follow HTMLMe…

aeda6eb

…diaElement naming

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 11, 2024

Feat englishm#10: Added /*html*/ and created an auxiliary load function

b943ba8

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 11, 2024

Feat englishm#10: Fixed track selection

6fe9c74

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 11, 2024

feat englishm#10: Modified show/hide controls to delete them and add …

7d86c0d

…them to dom if no attribute is present. Added mute attribute like in <video> tag

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 11, 2024

feat englishm#10: Modified src attributes. Now we can either have src…

107c545

… namespace and fingerprint as attributes or have them included as query params in the src attribute

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 14, 2024

feat englishm#10: Moved controls creation so they are only created if…

b5af481

… present as an attirubte. Also renamed variables to #element

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 14, 2024

feat englishm#10: Reordered css sheet

45d9dcd

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 14, 2024

feat englishm#10: Added trackNum attribute

5585586

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 14, 2024

feat englishm#10: Implemented fail function to work like in current w…

9f2366b

…atch tsx. Style tbd

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 14, 2024

feat englishm#10: Added advanced example and getter and setter for so…

139b467

…me attributes

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 14, 2024

feat englishm#10: Moved code to lib/video-moq

8a73722

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 18, 2024

feat englishm#10: Cleanup

c47a620

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 18, 2024

feat englishm#10: Cleaned up some package json lock

e68f284

santipuppoQualabs added a commit to santipuppoQualabs/moq-js that referenced this issue Dec 18, 2024

feat englishm#10: Cleaned up some package json lock

18d9328

englishm added a commit that referenced this issue Jan 16, 2025

Merge pull request #16 from santipuppoQualabs/feature/web-component

16fac27

Issue #10 - Web component

nicolaslevy closed this as completed Jan 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create player component `video-moq` #10

Create player component `video-moq` #10

emilsas commented Nov 28, 2024 •

edited

Loading

englishm commented Dec 3, 2024

santipuppoQualabs commented Dec 9, 2024

santipuppoQualabs commented Dec 10, 2024

santipuppoQualabs commented Dec 18, 2024

nicolaslevy commented Jan 16, 2025

nicolaslevy commented Jan 23, 2025 •

edited

Loading

Create player component video-moq #10

Create player component video-moq #10

Comments

emilsas commented Nov 28, 2024 • edited Loading

Basic Usage

Advanced Usage

List of attributes to implement

Possible implementation

englishm commented Dec 3, 2024

santipuppoQualabs commented Dec 9, 2024

santipuppoQualabs commented Dec 10, 2024

santipuppoQualabs commented Dec 18, 2024

nicolaslevy commented Jan 16, 2025

nicolaslevy commented Jan 23, 2025 • edited Loading

Create player component `video-moq` #10

Create player component `video-moq` #10

emilsas commented Nov 28, 2024 •

edited

Loading

nicolaslevy commented Jan 23, 2025 •

edited

Loading