Shaka player

[gs86]

Hello all

Has anyone tried integrating shaka-player in quasar…

If yes, can you please share a sample version of code?

Thanks

[gs86]

Nevermind, i have figured out and developed my own component in case someone needs below is the code…

Install: npm i shaka-player

<template>
  <video
    ref="shakaVideo"
    :width="width"
    :height="height"
    poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
    controls
  ></video>
</template>

<script>
import * as shaka from "shaka-player";

export default {
  name: "ShakaPlayer",
  props: {
    manifestUri: {
      type: String
    },
    width: {
      type: String,
      default: "200px"
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {};
  },

  mounted() {
    // Install built-in polyfills to patch browser incompatibilities.
    shaka.polyfill.installAll();

    // Check to see if the browser supports the basic APIs Shaka needs.
    if (shaka.Player.isBrowserSupported()) {
      // Everything looks good!
      // Create a Player instance.
      var video = this.$refs.shakaVideo;
      var player = new shaka.Player(video);

      // Attach player to the window to make it easy to access in the JS console.
      window.player = player;

      // Listen for error events.
      player.addEventListener("error", onErrorEvent);

      // Try to load a manifest.
      // This is an asynchronous process.
      player
        .load(this.manifestUri)
        .then(function() {
          // This runs if the asynchronous load is successful.
          console.log("The video has now been loaded!");
        })
        .catch(onError); // onError is executed if the asynchronous load fails.
    } else {
      // This browser does not have the minimum set of APIs we need.
      alert("Browser not supported!");
    }

    function onErrorEvent(event) {
      // Extract the shaka.util.Error object from the event.
      onError(event.detail);
    }

    function onError(error) {
      // Log the error.
      console.log("Error code: ", error.code, ", object: ", error);
    }
  }
};
</script>