@byteark/byteark-player-vue - npm Package Compare versions

Comparing version 1.0.0-beta24 to 1.0.0-beta25

package.json

 {
   "name": "@byteark/byteark-player-vue",
-  "version": "1.0.0-beta24",
+  "version": "1.0.0-beta25",
   "main": "dist/@byteark/byteark-player-vue.umd.js",
@@ -5,0 +5,0 @@ "description": "ByteArk Player Container for Vue.js",

README.md

@@ -10,2 +10,3 @@ # ByteArk Player Container for Vue.js
   - [Installation](#installation)
+  - [Compatibility](#compatibility)
   - [Usage](#usage)
@@ -33,2 +34,12 @@ - [Options prop](#options-prop)
 
+## Compatibility
+
+Since Vue 3 is not backward compatible, please make sure to install the correct ByteArk Player Container version based on your Vue version.
+
+| Vue Version | Package Version |
+|-------------|-----------------|
+| 2.x         | 1.x             |
+| 3.x         | 2.x             |
+
+
 ## Installation
@@ -47,3 +58,3 @@
 
-Include and register `ByteArkPlayerContainer` in your project.
+1. Include and register `ByteArkPlayerContainer` in your project.
 
@@ -85,3 +96,3 @@ ```vue
 
-Include stylesheet in your project
+2. Include stylesheet in your project
 
@@ -98,42 +109,13 @@ ```vue
 
-Use `fill` mode if you want the video to be displayed on a fixed-size container.
-
-```vue
-<template>
-  <ByteArkPlayerContainer
-    :options="playerOptions" />
-</template>
-
-<script>
-import ByteArkPlayerContainer from '@byteark/byteark-player-vue';
-
-export default {
-  components: {
-    ByteArkPlayerContainer,
-  },
-  data() {
-    return {
-      playerOptions: {
-        autoplay: true,
-        fill: true,
-        aspectRatio: '16:9',
-        poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
-        sources: {
-          src: 'https://video.example.com/path/to/video/playlist.m3u8',
-          type: 'application/x-mpegURL',
-          // Optional
-          title: 'Video Title',
-          videoId: 'RI2PimuHxDXw',
-          poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
-        },
-      },
-    };
-  },
-};
-</script>
+In case that you want to display videos inside a fix-sized container, use fill layout mode by passing `fill: true` in the player options.
 ```
+playerOptions: {
+  ...options,
+  fill: true,
+},
+```
 
 ## Options prop
 
-You have to pass `options` object to `ByteArkPlayerContainer` 
+You have to pass `options` object to `ByteArkPlayerContainer`
 
@@ -210,3 +192,3 @@ | Name         | Type         | Default | Description                                                                  |
 ⁕ You are reminded that [HTML5 video element fires a pause event whenever the playback stops](https://www.w3.org/2010/05/video/mediaevents.html), including at the end of the content.
-  
+
 For an example of implementing these events, please see [Controlling Players Section](#controlling-players).
@@ -377,4 +359,4 @@
   <ByteArkPlayerContainer
-    @ready="onReady"
-    :options="playerOptions" />
+          @ready="onReady"
+          :options="playerOptions" />
 </template>
@@ -381,0 +363,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1403417

increased by2.18%

Lines of code

11508

increased by1.84%

Worsened metrics

Number of lines in readme file

398

decreased by-4.33%

No dependency changes