Cordova app not open azure media player video

Question

I have an app made in VueJS with Quasar framework that has a tag that opens an Azure Media Player video. It works perfectly in the browser but when compiling with cordova for android it doesn't play the video in the apk, apparently it doesn't load the JavaScript:

<link href="//amp.azure.net/libs/amp/2.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src="//amp.azure.net/libs/amp/2.3.0/azuremediaplayer.min.js" onload="alert('Cargo el amp')"></script>

This is the method I use to load the video:

loadVideo () {
      alert('Entro al load video')
      alert('Variable window  ' + JSON.stringify(window.amp))
      const myPlayer = window.amp(this.idVideo, { /* Options */
        techOrder: ['azureHtml5JS', 'flashSS', 'html5FairPlayHLS', 'silverlightSS', 'html5'],
        'nativeControlsForTouch': false,
        autoplay: true,
        controls: true,
        // width: '328',
        // height: '202',
        poster: '',
        fluid: true
      }, function () {
        console.log('Good to go!')
        // add an event listener
        alert("Good to go!'")
        this.addEventListener('ended', function () {
          console.log('Finished!')
          alert('Finished')
        })
        this.addEventListener('error', function () {
          var errorDetails = myPlayer.error()
          var code = errorDetails.code
          var message = errorDetails.message
          alert('Hay error ' + code + message)
        })
      }
      )
      myPlayer.src([{
        src: this.srcVideoDialog,
        type: 'application/vnd.ms-sstr+xml'
      }])
    }

As you can see I put alerts to know at what point it enters but does not get to load the function window.amp I hope someone has found the solution to this !!!

regards

score 0 · Answer 1 · answered Mar 20 '20 at 07:25

It seems to me that this issue is caused due to window.amp being available on the browser but not being available on Android.

From TypeScript's documentation

Sometimes you’ll end up in a situation where you’ll know more about a value than TypeScript does. Usually this will happen when you know the type of some entity could be more specific than its current type.

Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” A type assertion is like a type cast in other languages, but performs no special checking or restructuring of data. It has no runtime impact, and is used purely by the compiler. TypeScript assumes that you, the programmer, have performed any special checks that you need.

Rewrite window.amp as (<any>window).amp

score 0 · Answer 2 · answered Mar 20 '20 at 14:53

Following up on my problem. I created a js and css file with the content of azure media player and changed the link in my index:

<link href="statics/amp.css" rel="stylesheet">
<script src="statics/amp.js"></script>

That way I do load my javascript without problems so it seems that the problem was in the access to the source of origin: //amp.azure.net/libs/amp/2.3.0/azuremediaplayer.min.js

I must analyze as there seems to be a problem with the cordova whitelist plugin

Cordova app not open azure media player video

2 Answers2