To focus on the important bits, styling (layout, borders, shadows, etc) classes have been replaced with. The markup here is heavily commented to help you understand what is going on. I'm going to use Bootstrap here, but you can use whichever CSS framework you're comfortable with. Let's look at a simplified example of a typical video/chat view. We'll need to add our own fullscreen button and playback and volume controls since the built-in button in the video control will only work to make the itself fullscreen. That means we can hide the native browser controls and wrap the video player and chat element group in a single and go fullscreen with the entire layout. That might sound obvious, but what you may not realize is that it can present any HTML element in fullscreen mode. The HTML Fullscreen API lets us present a specific HTML node in fullscreen view. Make sure to check support and limitations before implementing it in your production application. For example, Safari uses the non-standard :-webkit-full-screen name. Note: The :fullscreen pseudo-class is well supported in modern browsers but has some caveats. ![]() An alternative approach is to listen for the fullscreenchange event and add/remove classes to achieve different styles per view, but that would involve a lot of JavaScript and I personally find the pseudo-class approach cleaner and easier to work with. To achieve this enhanced user experience, we'll hide the native controls and use the HTML Fullscreen API and some CSS using pseudo-classes to modify the look and position of our elements when in fullscreen. ![]() To try out the demo, open it in a new browser tab and click the fullscreen icon in the top right corner of the video player. Note: CodePens are embedded in an on dev.to which does not include permissions for fullscreen. Instead, chat messages are added directly to the chat container to simulate a real chat experience so that you can see what messages look like both in and out of fullscreen. To keep things simple and focus on the CSS and HTML APIs, this demo doesn't contain an actual live stream or chat. So why shouldn't chat be visible when viewing in fullscreen? Wouldn't it be nicer to create an immersive fullscreen experience like this instead?īefore we look at the code involved, let's take a look at the finished product so we can see the effect we are trying to achieve. Our viewers can actively participate in the conversation instead of passively consuming it. Something like this:Ĭhat adds a layer of interactivity to live streaming platforms. If you think about a typical live streaming UGC platform, many times the video is accompanied by a live chat stream located somewhere nearby. If that works for your requirements, great! But, sometimes our requirements call for a more custom view that includes additional elements in the fullscreen view. However, any nearby content or other elements - even elements that we've overlaid on the video with absolute positioning - are not visible in this view. Stills used from Big Buck Bunny © copyright 2008, Blender Foundation / This allows the video that is being played to fill our entire display. ![]() Here's the native control button in Chrome: The nice thing about the tag in HTML is that it allows users to go fullscreen by clicking the button in the native browser control or by double clicking on the video itself. In this post, we won't look at anything specific to Amazon IVS chat, but rather a way to enhance the user experience by overlaying a chat view on top of a fullscreen video. We've even looked at how to create an interactive whiteboard with Amazon Interactive Video Service (Amazon IVS) chat. ![]() Over the past 6 weeks, we've learned how to create a chat room and integrate it into a live streaming application, and how to moderate chat messages (in both an automated and manual manner). I've been focusing a lot lately on chat, because I feel like it's an important feature for any live streaming user generated content (UGC) platform.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |