Hello welcome back to my story.
In this story I’ll explain how to create a youtube-like floating continuous video player in VueJS.
When you’re playing a playlist on youtube, then moving from main video url to another url, the video will not destroyed instead it will shown and continue on bottom right corner.
Example from youtube when playing directly from main video url.
Example from youtube when moving to another url, the video still continue and shown at bottom right corner.
Okay, time to implement the concept in new vuejs project.
Some tools that I’ll add in vuejs:
- Vuex : To maintain video player state
- Router : For SPA
While creating a new vuejs project with @vue/cli, I’ll add vuex and router in features select section.
In this story I’ll using vuejs 2.x version.
After creating the project I’ll delete all the unnecessary files:
- Delete assets folder
- Delete HelloWorld.vue from components folder
- Delete All files inside views folder
- Clean router/index.js codes
- Clean App.vue codes
router/index.js files after cleanup.
App.vue codes after cleanup.
Then I’ll setup vuex layer in store/index.js, I’ll separate the video player state in modules. so I created folder with name modules inside store folder and create file with name videoPlayer.js inside modules folder.
And make the videoPlayer.js codes like below.
Look explanation inside codes, timeToContinue state will be key to continue or not the video when user leaving the main video url.
Then I’ll import the videoPlayer.js as module in store/index.js files. The store/index.js codes will like below.
Look explanation inside codes, You can delete the state, mutation, and action objects in this files actually.
Then I’ll create 2 files inside views folder with name Home.vue and Detail.vue.
- Home.vue : Using to show all videos.
- Detail.vue : Using to show and playing selected videos.
Include the new created view to router/index.js routes section. So the router/index.js codes will like below.
Then I’ll create a component inside components folder with name VideoPlayer.vue, this component will use as video player inside Home.vue and Detail.vue views later.
And make the VideoPlayer.vue codes will look like below.
Look explanation inside codes.
Then The views/Home.vue turn. I’ll create some dummy data of videos. So the views/Home.vue codes will look like below.
Look explanation inside codes.
Then the home of application (localhost:8080) will be like below.
Then on views/Detail.vue codes will like below.
Look explanation inside codes, Detail.vue will be the main video url.
Time to test.
Home url : localhost:8080.
Main video url : localhost:8080/1 . (1 is video id)
I’ll trying to play video here and back to home url.
Video still continue when I leaving video url.
When I back to video url with id 1 (the same id on current registered video player). The video still continue. But when back to video url with different id the video will reload.
Conclution: Using vuex to maintain the state of video player make this concept easier to build.
That’s it, It’s not smooth as youtube but yah :3.
Project Repo: https://github.com/erthru/Youtube-Like-Floating-Video-on-Vue
I actually made an open source project that implement the same concept. But it made with react and typescript.
Check demo here : https://fate-series.web.app/
Check repo here: https://github.com/erthru/fate-series