Shaka player



  • Hello all

    Has anyone tried integrating shaka-player in quasar…

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

    Thanks



  • 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>
    

Log in to reply