Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theoplayer/samples-vuejs
A sample app integrating THEOplayer.js as a Vue.js component.
https://github.com/theoplayer/samples-vuejs
theoplayer video-player vue vuejs
Last synced: 30 days ago
JSON representation
A sample app integrating THEOplayer.js as a Vue.js component.
- Host: GitHub
- URL: https://github.com/theoplayer/samples-vuejs
- Owner: THEOplayer
- Created: 2020-03-24T15:04:53.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:35:20.000Z (about 2 years ago)
- Last Synced: 2023-03-07T05:37:15.049Z (almost 2 years ago)
- Topics: theoplayer, video-player, vue, vuejs
- Language: Vue
- Homepage:
- Size: 4.09 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# THEOplayer Vue.js Sample
## License
This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
## A step-by-step guide:
1. Open your favorite IDE and then a terminal and install Vue CLI component:
```
npm install vue
```
2. If needed, create a new workspace and initial application:
```
vue create theoplayer-vuejs-sample
```
3. Choose your preferred configuration by choosing one of the presets from the list.
4. Once the project is created you should see successful message.
5. Go to root project and start application using instructions:
```
cd theoplayer-vuejs-sample
npm run serve
```
6. As a result you should be able to browse the default page under the following url: http://localhost:8080/
7. Reference the THEOplayer files in index.html like following:
```html
theoplayer-vuejs-sample
We're sorry but theoplayer-vuejs-sample doesn't work properly without
JavaScript enabled. Please enable it to continue.
```
8. In the src/components/ add new file and name it Player.vue, then add the following snippet:
```html
export default {
props: ["source"],
mounted: function() {
this.playerInit();
},
methods: {
playerInit() {
const player = new window.THEOplayer.Player(this.$refs.theoplayer, {
fluid: true,
libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/"
});
player.source = {
sources: this.source
};
}
}
};
.THEOplayer {
width: 50%;
margin: 0 auto;
}
.video-js.vjs-16-9 {
padding-top: 28.12%;
width: 50%;
}
```
9. Then you can reference the Player component in different parts of the app and pass the source, for instance you can change App.vue like following:
```html
import Player from "./components/Player.vue";
export default {
name: "app",
components: {
Player
},
data: function() {
return {
source: [
{
type: "application/x-mpegurl",
src: "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8"
}
]
};
}
};
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
```
## Including THEOplayer library assets
1. Create a new folder named i.e. libs under public folder and copy the THEOplayer WebSDK files there.
2. Change the index.html to reference local files:
```html
theoplayer-vuejs-sample
We're sorry but theoplayer-vuejs-sample doesn't work properly without
JavaScript enabled. Please enable it to continue.
```
3. In the Player.vue modify libraryLocation like following:
```
const player = new window.THEOplayer.Player(this.$refs.theoplayer, {
fluid: true,
libraryLocation: "./libs/THEOplayer"
});
```