Video player is not supporting m3u8 HLS format

[arulkumararul2000]

Video Player

• [x] m3u3 HLS videos not support
• [x] Add video quality control and speed control

Description

• the HLS video format is used by many of the Top apps now a days so keep update on this things.
• Video quality control is used to control the quality of video and also it is give good video for the users.
• Speed Control is also good to some users like that options.

[seunghoh]

Hi @arulkumararul2000, Thanks for requesting the issue.

About the HLS issue, we will take a look and give you feedback soon. About the video quality and speed control support, sounds good to add but I can't tell you when. I promise to add it to the todo list. As you may already know, the current video player is simply Sandstone-themed video element. If you need any additional features urgently, you can make it your own and attach the feature to the MediaControls. https://enactjs.com/docs/modules/sandstone/MediaPlayer/#MediaControls

[seunghoh]

Hi @arulkumararul2000 I am happy to share that we are almost done supporting video player features you mentioned. It would be helpful to create a guide doc for you if you tell me what kind of app are you making for which device using Enact Video Player. Thanks

[arulkumararul2000]

Hi @seunghoh, thank you! I'm excited to experience this feature. It will help me play HLS videos on our VOD (Video on Demand) platform on Samsung Tizen TV.

[seunghoh]

@arulkumararul2000 Cool~ Your VOD service runs globally? Can I also try? I can't wait to see your VOD app running on Tizen TV. Please let me know when your app shipped. If your VOD app is also shipped on webOS TV, it would be much cooler ;) Please ask me if there is anything to help you when you are using Enact to make your app. Thanks!

[arulkumararul2000]

@seunghoh Sounds great! Once it is shipped, I will share it with you. Can you confirm if the HLS video feature is currently live? I also have some other questions. Can I integrate video ads into this video player? Is there a way to achieve this?

[seunghoh]

Yes, it's live. Technically, we just added a Pattern sample by importing hls.js. Enact doesn't need to be updated. You can refer to - https://github.com/enactjs/samples/tree/develop/sandstone/pattern-video-player-custom But, for the playrate control, Enact should be updated. So, please wait until our next version release. I will also let you know.

By the way, this is just FYI, On, webOS TV, you don't have to import hls.js to support m3u8 file format. webOS Platform level supports the hls :) but it only works on webOS. https://webostv.developer.lge.com/develop/guides/mediaoption-parameter

[arulkumararul2000]

Thanks @seunghoh the m3u8 is Working fine 🤝 but I also have some other questions. Can I integrate video ads into this video player? Is there a way to achieve this?

[seunghoh]

I don't understand what "integrate video ads into the videoplay" means. If the Ads are separate layer, you can free to add. The samples shows various pattern that overlay component in the video player. You can refer to the pattern.

[arulkumararul2000]

@seunghoh I am inquiring about how to integrate Google Ads into Enact VideoPlayer. Do you have any insights or suggestions on how to achieve this?

[seunghoh]

I haven't integrated google ads into the video element but I belive you can make your own. As you can see, https://enactjs.com/docs/modules/sandstone/VideoPlayer/#Video.mediaComponent You can make your own customized video element for VideoPlayer with applying IMA3 HTML5 SDK. https://support.google.com/adsense/answer/6391192

[arulkumararul2000]

Thanks @seunghoh IMA3 is working perfectly in HTML code, but when it comes to React, there are no proper docs available. I've personally tried adding it, but I'm unable to do so. Can you please help me with this? Do you have any samples that could guide me?

[seunghoh]

Unfortunately, I don't have any sample, but I am sure you can find it. I just searched and found lots of discussions in the React community about the google ad in react like https://stackoverflow.com/questions/52369979/videojs-in-reactjs-with-google-ima-plugin

[seunghoh]

We've added a Video Player custom sample https://github.com/enactjs/samples/tree/develop/sandstone/pattern-video-player-custom Note that you don't have to import hls.js if your app runs only on webOS - https://webostv.developer.lge.com/develop/guides/mediaoption-parameter

Resolve this issue.