LiveInstantly, LLC.

Resources: THEOplayer Player Demo Web App

Thu, 10 Nov 2022 09:00:00 +0900

This blog article introduces our THEOplayer player demo web application as a practical application integrated with THEOplayer Web SDK for your video services.

THEOplayer is the universal video player solution created by THEO Technologies. The THEOplayer offers player SDKs for multiple platforms (such as HTML5 (Web), Apple iOS, Apple tvOS, Google Android, Google Android TV, Samsumg Tizen, LG webOS, Amazon FireTV, ROKU) which support for HLS, MPEG-DASH, advertisements, DRM and much more.

This demo web app is integrated with Nuxt 3, Vue 3, and Vuetify 3 frameworks to play multiple video stream examples with THEOplayer Web SDK. We publishes a Git repository for this player example at Github: https://github.com/liveinstantly/theoplayer-web-nuxt3-demos . Please refer the details in the repository.

This demo web app is deployed onto Netlify. Please access the demo site: https://theoplayer.demo.liveinstantly.cloud/ .

As of now, we demonstrates THEOplayer Web SDK only with a couple of example video streams, but we will add more examples soon to demonstrate much more features and scenarios with THEOplayer Web SDK.

Resources: THEOplayer player app example with Nuxt v3

Fri, 28 Oct 2022 09:00:00 +0900

This blog article explains how to integrate THEOplayer Web SDK with Nuxt v3 JS framework (including Vue3 and Vite) for a simple player app example.

Nuxt is an open-source framework under MIT license for building modern and performant web applications that can be deployed on any platform running JavaScript.

Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. For more details of Nuxt, please refer an introductory article about Nuxt 3 .

This player example is simply implemented with Nuxt3 and Composition API on a starter template which is provided by Nuxt3 CLI (nuxi) tools.

We publishes a Git repository for this player example at Github: https://github.com/liveinstantly/theoplayer-web-nuxt3-example . Please refer the details in the repository.

Step-by-Step to integrate THEOplayer Web SDK

Prerequisites

The following dev tools are used for this guide.

Tools	Version
npm	8.19.2
yarn	1.22.5
node	v16.18.0

1. Create a Nuxt3 app template

Run the following command to create a Vue3 application template:

npx nuxi init theoplayer-web-nuxt3-example

The command output will be like as follows:

yarn install
yarn install v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
 :
[4/4] Building fresh packages...
success Saved lockfile.
$ nuxt prepare
Nuxi 3.0.0-rc.12
√ Types generated in src/.nuxt
Done in 5.76s.

2. Move Nuxt3 source under `./src` directory

This is an optional step.

Nuxt web application expects source files/directories will be flat under the root project directory, while Vue web application expects source files/directories inside ./src directory under the root project directory.

If you want to move the source files/directories of your Nuxt3 web application, you can follow the steps below:

2.1. Create `src` directory and move `app.vue` to `./src`

Run the following command after createing a starter template of Nuxt3 app.

mkdir src && mv app.vue ./src/

2.2. Change `tsconfig.json`

Modify ./tsconfig.json as below: change extend property from ./.nuxt/tsconfig.json to ./src/.nuxt/tsconfig.json.

{
 // https://v3.nuxtjs.org/concepts/typescript
 "extends": "./src/.nuxt/tsconfig.json",
}

3. Install required components

Run the following command to install Vue framework package dependencies.

yarn install

You can ignore information messages about esbuild module in yarn command output.

4. Add THEOplayer

4.1 Add module declaration (THEOplayer.d.ts)

Run the following command to install theoplayer NPM package, which includes type definition module for THEOplayer Web SDK.

yarn add theoplayer

4.2 Add `Player.vue` for THEOplayer Web SDK

Add the following code to src/components folder as Player.vue. This code is based on Vue3 Composition API and works with a given source array variable from parent component.

<script setup lang="ts">
import { ref, onMounted } from "vue";

const theoplayer = ref<HTMLElement | null>(null);
const props = defineProps<{ source: Array<any> }>();

function playerInit() {
 if (theoplayer.value != null) {
 console.log(theoplayer.value)
 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/",
 });
 player.source = {
 sources: props.source,
 };
 }
}

onMounted(() => {
 playerInit();
});
</script>

<template>
 <div
 class="theoplayer-container video-js theoplayer-skin vjs-16-9 theoplayer"
 ref="theoplayer"
 ></div>
</template>

<style scoped>
.theoplayer-container {
 margin: 0 auto;
 padding-top: 28.13%;
 width: 50%;
}
</style>

4.3 Add `Welcome.vue` and `NuxtLogo.vue`

Add the following codes to src/components folder as Welcome.vue and NuxtLogo.vue.

Welcome.vue:

<script setup lang="ts">
import Player from "./Player.vue";
import { ref } from "vue";
const source = ref([
 {
 type: "application/x-mpegurl",
 src: "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
 },
]);
</script>

<template>
 <div class="container">
 <NuxtLogo />
 <h1>Welcome to Nuxt</h1>
 <Player :source="source" v-if="source" />
 </div>
</template>

<style>
body {
 margin: 0;
}

.container {
 height: 100vh;
 width: 100vw;
 background: rgb(1, 42, 53);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

h1 {
 color: white;
 text-align: center;
 font-family: helvetica, arial, sans-serif;
 font-weight: 400;
}
</style>

NuxtLogo.vue:

<template>
 <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8"><g clip-path="url(#a)"><path fill="currentColor" d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z" fill="#80EEC0"></path><path d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z" fill="#00DC82"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z"></path></clipPath></defs></svg>
</template>

<style>
svg {
 width: 50vw;
}
</style>

4.4 Add THEOplayer type declaration in `global.d.ts`

Add the following script code as src/global.d.ts.

// Import types for THEOplayer
import theoplayer from "theoplayer";

declare global {
 interface Window {
 THEOplayer: typeof theoplayer;
 }
}

4.5 Add THEOplayer JavaScript, and CSS module in `app.vue`

Add the following section to src/app.vue to import THEOplayer CSS and JavaScript.

<script setup lang="ts">
useHead({
 meta: [
 {
 name: 'viewport',
 content: 'width=device-width, initial-scale=1'
 }
 ],
 link: [
 {
 rel: 'stylesheet',
 href: 'https://cdn.theoplayer.com/dash/theoplayer/ui.css'
 }
 ],
 script: [
 {
 type: "text/javascript",
 src: "https:/cdn.theoplayer.com/dash/theoplayer/THEOplayer.js",
 body: true,
 },
 ],
});
</script>

4.6 Change a component in `app.vue`

Change NuxtWelcome component to Welcome component (which is created at section 4.3) in src/app.vue in order to render THEOplayer in this example web app.

<template>
 <div>
 <Welcome />
 </div>
</template>

5. Run this sample application code and open with your browser

Run the following command to compile the codes and run a local server to host the sample application.

yarn dev

The command output will be like as follows:

Nuxi 3.0.0-rc.12
Nuxt 3.0.0-rc.12 with Nitro 0.6.0

 > Local: http://localhost:3000/

i Vite client warmed up in 2321ms
√ Nitro built in 734 ms

You can browse the application with localhost hostname and given port to see how it works.

This application uses a public THEOplayer player code with builtin license, which allows you to enable playback functionality in THEOplayer without your explicit license, but it is allowed only in localhost as its white-listed hostname. This means that you will see an error message ("The given license is invalid!") when you will run this application except on localhost.

The screenshot is as belows:

Using your local THEOplayer Web SDK

If you want to use your own THEOplayer Web SDK, you will need to put your (customized) Web SDK under src/public folder of Nuxt3 source tree.

Then, you will need to modify the following files to point the location of THEOplayer JS/CSS and library folder appropriately.

src/app.vue
src/components/Player.vue

For example, if you will put the SDK files into src/public/js/theoplayer folder, src/app.vue and src/components/Player.vue will be as below:

src/app.vue:

<script setup lang="ts">
useHead({
 meta: [
 {
 name: 'viewport',
 content: 'width=device-width, initial-scale=1'
 }
 ],
 link: [
 {
 rel: 'stylesheet',
 href: '/js/theoplayer/ui.css'
 }
 ],
 script: [
 {
 type: "text/javascript",
 src: "/js/theoplayer/THEOplayer.js",
 body: true,
 },
 ],
});
</script>

src/components/Player.vue:

 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "/js/theoplayer/",
 license: "license string"
 });

Closing

This article explained how to implement a simple player app example with THEOplayer and integrate THEOplayer Web SDK with Nuxt v3 JS framework.

Please refer this example app’s Git repository at Github: https://github.com/liveinstantly/theoplayer-web-nuxt3-example and feel free to reach out ot us if you have any questions.

Resources: THEOplayer player app example with Vue.js 3

Fri, 28 Oct 2022 09:00:00 +0900

This blog article explains how to integrate THEOplayer Web SDK with Vue.js v3 JS framework for a simple player app example.

Vue is a progressive JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model.

Vue ecosystem covers most of the common features needed in frontend development. But the web is extremely diverse - the things we build on the web may vary drastically in form and scale. Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:

Enhancing static HTML without a build step
Embedding as Web Components on any page
Single-Page Application (SPA)
Fullstack / Server-Side Rendering (SSR)
Jamstack / Static Site Generation (SSG)
Targeting desktop, mobile, WebGL, and even the terminal

This player example is simply implemented with Vue3/Vite and Composition API on a starter template which is provided by Vue CLI tools.

We publishes a Git repository for this player example at Github: https://github.com/liveinstantly/theoplayer-web-vue3-example . Please refer the details in the repository.

Step-by-Step to integrate THEOplayer Web SDK

Prerequisites

The following dev tools are used for this guide.

Tools	Version
npm	8.19.2
yarn	1.22.5
node	v16.18.0

1. Create a Vue3 app template

Run the following command to create a Vue3 application template:

yarn create vite theoplayer-web-vue-example --template vue-ts

The command output will be like as follows:

yarn create v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@3.1.0" with binaries:
 - create-vite
 - cva

Scaffolding project in C:\srcs\THEOplayer\theoplayer-web-vue-example...

Done. Now run:

 cd theoplayer-web-vue-example
 yarn
 yarn dev

Done in 14.52s.

2. Install required components

Run the following command to install Vue framework package dependencies.

yarn install

You can ignore information messages about esbuild module in yarn command output.

3. Add THEOplayer

3.1 Add module declaration (THEOplayer.d.ts)

Run the following command to install theoplayer NPM package, which includes type definition module for THEOplayer Web SDK.

yarn add theoplayer

3.2 Add `Player.vue` for THEOplayer Web SDK

Add the following code to src/components folder as Player.vue. This code is based on Vue3 Composition API and works with a given source array variable from parent component.

<script setup lang="ts">
import { ref, onMounted } from "vue";

const theoplayer = ref<HTMLElement | null>(null);
const props = defineProps<{ source: Array<any> }>();

function playerInit() {
 if (theoplayer.value != null) {
 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/",
 });
 player.source = {
 sources: props.source,
 };
 }
}

onMounted(() => {
 playerInit();
});
</script>

<template>
 <div
 class="theoplayer-container video-js theoplayer-skin vjs-16-9 theoplayer"
 ref="theoplayer"
 ></div>
</template>

<style scoped>
.theoplayer-container {
 margin: 0 auto;
 padding-top: 56.24%;
 width: 100%;
}
</style>

3.3 Add `Player.vue` component to `App.vue`

Add the following script code piece to <script setup> section in src/App.vue after a line for importing HelloWorld component.

import Player from "./components/Player.vue";
import { ref } from "vue";
const source = ref([
 {
 type: "application/x-mpegurl",
 src: "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
 },
]);

Add the following line to <template> section in src/App.vue just after the first <div> block.

 <Player :source="source" v-if="source" />

3.4 Add THEOplayer type declaration in `main.ts`

Add the following script code piece to src/main.ts before a line of createApp function call.

// Import types for THEOplayer
import theoplayer from "theoplayer";

declare global {
 interface Window {
 THEOplayer: typeof theoplayer;
 }
}

3.5 Add THEOplayer JavaScript and CSS module in `index.html`

Add the following lines to <head> section in index.html (just before </head> line) to import THEOplayer CSS.

 <link
 rel="stylesheet"
 type="text/css"
 href="//cdn.theoplayer.com/dash/theoplayer/ui.css"
 />

Add the following lines to <body> section in index.html (just before </body> line) to load THEOplayer JavaScript codes.

 <script
 type="text/javascript"
 src="//cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"
 ></script>

4. Run this sample application code and open with your browser

Run the following command to compile the codes and run a local server to host the sample application.

yarn dev

The command output will be like as follows:

yarn run v1.22.5
$ vite

 VITE v3.2.0 ready in 750 ms

 ➜ Local: http://127.0.0.1:5174/
 ➜ Network: use --host to expose

You can browse the application with localhost hostname and given port to see how it works.

Please note that you cannot run the public THEOplayer player code even in 127.0.0.1, since it’s not match with localhost as a string.

The screenshot is as belows:

Using your local THEOplayer Web SDK

If you want to use your own THEOplayer Web SDK, you will need to put your (customized) Web SDK under public folder of Vue3 source tree.

Then, you will need to modify the following files to point the location of THEOplayer JS/CSS and library folder appropriately.

index.html
src/components/Player.vue

For example, if you will put the SDK files into public/js/theoplayer folder, index.html and src/components/Player.vue will be as below. In addition, you need to set your own THEOplayer Web SDK license to the configurations for Player class, which can be obtained from THEOplayer’s portal.

index.html:

 <head>
 :
 <link
 rel="stylesheet"
 type="text/css"
 href="/js/theoplayer/ui.css"
 />
 </head>

index.html:

 <body>
 :
 <script
 type="text/javascript"
 src="/js/theoplayer/THEOplayer.js"
 ></script>
 </body>

src/components/Player.vue:

 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "/js/theoplayer/",
 license: "license string"
 });

Closing

This article explained how to implement a simple player app example with THEOplayer and integrate THEOplayer Web SDK with Vue.js v3 JS framework.

Please refer this example app’s Git repository at Github: https://github.com/liveinstantly/theoplayer-web-vue3-example and feel free to reach out ot us if you have any questions.

Resources: Introduction of Video Streaming Technologies

Mon, 24 Oct 2022 09:00:00 +0900

History of Video Streaming Technology

With the growth of the Internet, digital video technology has been used as a matter of course for various businesses in various scenarios, and it has created various histories.

Since the 2000s, various video streaming technologies had been developed by various companies Those video streaming technologies were developed using its own protocol and its own server/client technologies, and it was sometimes difficult to apply to the businesses because it was necessary to be familiar with each of technologies. With these technologies, the quality of the playback video and audio could be controlled by both the client and the servers via their communication link, but some network environments such as over routers and network address translation (NAT) made the application with the technologies difficult.

In the late 2000s, there were strategic activities to accelerate harmonization between HTTP technology and the video streaming, and various companies developed HTTP-based adaptive streaming video delivery technology. That HTTP-based adaptive streaming has deprecated the above existing video streaming technology and updated the video streaming world to HTTP.

Normally, when playing a video file via simple HTTP download, both video downloading network bandwidth and video quality will be the critical factors to playback the video smoothly, even if the video can be played as it is being downloaded.

In short, if the video quality (video data size per second) is larger than the downloading network bandwidth, the video playback cannot keep up and the video will stop in the middle.

A technology called adaptive streaming attempts to solve this problem.

Adaptive streaming is based on splitting a video file into multiple segments and downloading and playing each of segmented video files. A single video segment is, for example, a 2 to 10 second length of video, and by preparing a sequence of these video segments for each of different qualities (bitrate) and resolutions, video player is able to choose appropriate quality and/or resolution of video segments to play and switch between qualities and/or resolutions adaptively, depending on the speed and state of the connection between the video web server and the video player.

With this technology, the playback client can play back with switching the quality of the video during playback according to the bandwidth of network connection, and the video can be played without stopping and/or stalling.

In addition, since it is HTTP-based streaming, you can use CDNs (Content Delivery Networks) with HTTP caching to deliver video segment files to large audiences with massive scalability, while minimizing the load increases on your streaming servers.

Adaptive Streaming

For adaptive streaming, three streaming technologies were developed at the time around 2009, each supporting both live and video-on-demand video delivery scenarios, each with its own dedicated client player.

Adobe HTTP Dynamic Streaming (HDS)
Apple HTTP Live Streaming (HLS)
Microsoft Smooth Streaming

HTML did not define <video> or <audio> tag at the time. Media such as videos and audios, known as rich media, had to be played back in player implementations in browser plugins. For this reason, the service providers had to support all of these three streaming in order to deliver contents to large audiences as much as possible.

With the spread of mobile devices and multi-devices, the standardization of video streaming technologies and client technologies have become an issue, and various companies have contributed to the development of common standard video streaming technology and client platform.

In the standardization of video streaming technology, MPEG-DASH (Dynamic Adaptive Streaming over HTTP) was established as the first international standard in 2012 for the standardization of video streaming technology. Microsoft and Adobe contributed to the development of this MPEG-DASH technology based on their technology and experiences.

In addition, in an organization called DASH Industry Forum established by Akamai, Ericsson, Microsoft, Netflix, Qualcomm, and Samsung as founding members, the organization is trying to popularize the standardized MPEG-DASH technology while solving actual compatibility problems and creating guidelines for recommendations in the market.

Besides MPEG-DASH, Apple had submitted their HLS technology to the IETF (Internet Engineering Task Force) as an RFC draft in 2009 when it was first developed, and finally HLS was announced as RFC8216 in 2017 .

For the client standardization, W3C introduced <video> / <audio> tag into HTML5, and a technology called Media Source Extension (MSE) was developed by Google/Microsoft/Netflix as a media extension for HTML5. As the results, MPEG-DASH format video playback can be achieved with a player implemented in JavaScript.

The current of Video Streaming

Currently, two technologies, MPEG-DASH and HLS, are used in many services and applications as the adaptive streaming technology.

ISO/IEC 23009-1 - MEPG-DASH (Dynamic Adaptive Streaming over HTTP)
IETF RFC 8216 HTTP Live Streaming (HLS)

For playback of these streaming technologies, on PCs (Windows/macOS), JavaScript players using HTML5 Media Extensions APIs can be used on various browsers which support HTML5 Media Extensions, while on mobile devices, such as Android and iOS operating systems, a player developed with standard APIs or extended components on those operating systems and/or platforms, can be used for playback of adaptive streaming.

For a JavaScript-based player in browser environments, the following open source players are widely used in the market.

Players on Apple operating systems are often developed using a native platform called AVPlayer that supports HLS streaming.

Players on Android operating systems often uses the ExoPlayer open source player platform developed by Google, which supports both HLS and MPEG-DASH streaming.

The THEOplayer commercial player SDKs that we handle are typically based on the a above basic functionalities and/or player functions in operating systems, and adds various additional advanced features to make your player easy for developing and valuable for more various scenario support.

Video Streaming Platform

As mentioned above, there are still two formats of video streaming technology used in the market, and platforms that perform video streaming generally need to support both streaming formats. Therefore, some streaming platforms have the ability to dynamically generate and output two streaming formats in real time.

This dynamic stream generation, commonly referred to as “just-in-time packaging”, is applicable to both live and on-demand streams, and as a result, you can build a streaming architecture with simpler workflow.

The product of Wowza Media Systems, which we handle, is one of the streaming platforms shown above. It supports various input formats, performs dynamic packaging of MPEG-DASH and HLS streams from the inputs for your video streaming over the Internet.

Closing

In this article, we briefly introduced the history of streaming technology and the technologies around it.

Digital video and audio, and streaming technologies are evolving year by year, and it is important to catch up with those latest technologies and products/solutions that support them, when building your streaming systems and services. We are working with global media companies to support our customer projects and services, while keeping up to date with those latest technologies.

LiveInstantly, LLC.

Resources: THEOplayer Player Demo Web App

Resources: THEOplayer player app example with Nuxt v3

Step-by-Step to integrate THEOplayer Web SDK

Prerequisites

1. Create a Nuxt3 app template

2. Move Nuxt3 source under ./src directory

2.1. Create src directory and move app.vue to ./src

2.2. Change tsconfig.json

3. Install required components

4. Add THEOplayer

4.1 Add module declaration (THEOplayer.d.ts)

4.2 Add Player.vue for THEOplayer Web SDK

4.3 Add Welcome.vue and NuxtLogo.vue

4.4 Add THEOplayer type declaration in global.d.ts

4.5 Add THEOplayer JavaScript, and CSS module in app.vue

4.6 Change a component in app.vue

5. Run this sample application code and open with your browser

Using your local THEOplayer Web SDK

Closing

Resources: THEOplayer player app example with Vue.js 3

Step-by-Step to integrate THEOplayer Web SDK

Prerequisites

1. Create a Vue3 app template

2. Install required components

3. Add THEOplayer

3.1 Add module declaration (THEOplayer.d.ts)

3.2 Add Player.vue for THEOplayer Web SDK

3.3 Add Player.vue component to App.vue

3.4 Add THEOplayer type declaration in main.ts

3.5 Add THEOplayer JavaScript and CSS module in index.html

4. Run this sample application code and open with your browser

Using your local THEOplayer Web SDK

Closing

Resources: Introduction of Video Streaming Technologies

History of Video Streaming Technology

Adaptive Streaming

The current of Video Streaming

Video Streaming Platform

Closing

2. Move Nuxt3 source under `./src` directory

2.1. Create `src` directory and move `app.vue` to `./src`

2.2. Change `tsconfig.json`

4.2 Add `Player.vue` for THEOplayer Web SDK

4.3 Add `Welcome.vue` and `NuxtLogo.vue`

4.4 Add THEOplayer type declaration in `global.d.ts`

4.5 Add THEOplayer JavaScript, and CSS module in `app.vue`

4.6 Change a component in `app.vue`

3.2 Add `Player.vue` for THEOplayer Web SDK

3.3 Add `Player.vue` component to `App.vue`

3.4 Add THEOplayer type declaration in `main.ts`

3.5 Add THEOplayer JavaScript and CSS module in `index.html`