Home / Blog / How to create a Video player screen

How to create a Video player screen

17 Jul 2024 · 6 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Video Player screen holds significant importance for streaming services, educational platforms, and social media applications. Its primary goal is to elevate the user's viewing experience through intuitive controls and a visually captivating interface. This screen incorporates a video player interface equipped with search functionality, a video timeline for easy navigation, and a transcript mode to enhance user engagement.

This article offers a comprehensive guide, equipping designers and developers to seamlessly integrate a user-centric video player screen into their applications. This effortless integration is made possible by leveraging design components from the Ionic Kit, built on the robust foundation of the extensive library within the Ionic framework.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start video-player-screen blank --type=react

3. Get inside the project directory

cd video-player-screen

4. Create page VideoPlayer.tsx inside src/pages and add code

import { IonPage } from '@ionic/react';

const VideoPlayer: React.FC = () => {
  return <IonPage></IonPage>;
};

export default VideoPlayer;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add header inside the page

For convenience, we will be using the layout structure recommended by Ionic for our screen. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    <IonToolbar>...</IonToolbar>
  </IonHeader>
  <IonContent>...</IonContent>
</IonPage>

6. Add button at the beginning of the toolbar

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'></IonButtons>
  </IonToolbar>
</IonHeader>

7. Create the back button

Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='', to create a back button that navigates back in the app's history upon being clicked.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

8. Add title to the page

After the IonButtons component, place the IonTitle with the text 'Video transcript' to add a title for this page.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Video transcript</IonTitle>
  </IonToolbar>
</IonHeader>

9. Add the button at the end of the toolbar

After the IonTitle component, include another IonButtons component and set the slot to end. This positions the button at the end of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Video transcript</IonTitle>
    <IonButtons slot='end'>
    </IonButtons>
  </IonToolbar>
</IonHeader>

10. Within the IonButtons add the IonButton component

11. Place an icon within the button

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={ellipsisHorizontal} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Video transcript</IonTitle>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={ellipsisHorizontal}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

12. Repeat steps 10 and 11

Repeat steps 10 and 11 to add another IonButton component with the icon close.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Video transcript</IonTitle>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={ellipsisVertical}></IonIcon>
      </IonButton>
      <IonButton>
        <IonIcon slot='icon-only' icon={close}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

13. Add the Content component

Following the IonHeader component, add the IonContent component according to the recommended page structure.

<IonHeader>
  ...
</IonHeader>
<IonContent>
  ...
</IonContent>

14. Place card into the content

Inside the IonContent component, place the IonCard component as a container for the video.

<IonContent>
  <IonCard></IonCard>
</IonContent>

15. Add the img preview inside the card

Inside the IonCard add the IonImg component to add the preview of video. Set the property src as preview. Remember to import the required image before.

<IonContent>
  <IonCard>
    <IonImg src={preview}></IonImg>
  </IonCard>
</IonContent>

After the IonCard, add the IonSearchbar component to add an opportunity to search through a collection. Set the property placeholder as Search by video.

<IonContent>
  <IonCard>
    <IonImg src={preview}></IonImg>
  </IonCard>
  <IonSearchbar placeholder='Search by video'></IonSearchbar>
</IonContent>

17. Add the IonList to organize items within

Set the property lines as none to style the content inside.

<IonContent>
  <IonCard>
    <IonImg src={preview}></IonImg>
  </IonCard>
  <IonSearchbar placeholder='Search by video'></IonSearchbar>
  <IonList lines='none'>
  </IonList>
</IonContent>

18. Inside the IonList component, place the IonItem component

<IonList lines='none'>
  <IonItem>
  </IonItem>
</IonList>

19. Place the badge inside the item

Inside the IonItem component, place the IonBadge component with property slot='start'. Set the text '0:01' inside.

<IonItem>
  <IonBadge slot='start'>0:01</IonBadge>
</IonItem>

20. Place the label

Add the IonLabel component with the text 'welcome today's class is a full body matte pilates'.

 <IonItem>
  <IonBadge slot='start'>0:01</IonBadge>
    <IonLabel>welcome today's class is a full body matte pilates</IonLabel>
  </IonItem>
<IonItem>

21. Repeat steps from 18 to 20

Add another IonItem component with the text '0:11' inside the IonBadge and the text 'all you need for this workout is you and a mat' inside the IonLabel.

22. Repeat steps from 18 to 20

Add another IonItem component with the text '0:13' inside the IonBadge and the text 'let's start today's class in a cross-legged position' inside the IonLabel.

23. Repeat steps from 18 to 20

Add another IonItem component with the text '0:29' inside the IonBadge and the text 'your arms forward interlace your fingers' inside the IonLabel.

24. Repeat steps from 18 to 20

Add another IonItem component with the text '0:31' inside the IonBadge and the text 'then press your palms away from you' inside the IonLabel.

25. Repeat steps from 18 to 20

Add another IonItem component with the text '0:34' inside the IonBadge and the text 'as you round your spine then lengthen your spine' inside the IonLabel.

26. Repeat steps from 18 to 20

Add another IonItem component with the text '0:36' inside the IonBadge and the text 'reach your arms up to the sky' inside the IonLabel.

27. Repeat steps from 18 to 20

Add another IonItem component with the text '0:42' inside the IonBadge and the text 'beautiful side bend over to the left' inside the IonLabel.

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday