Add script to inside of vue template

Question

I need insert script like this

    <div data-player-id="912d05c">
  <script src="//cdn.flowplayer.com/players/7/flowplayer.async.js">
    { 
            "src": "https://s3.amazonaws.com/69693f173770c49cbb5.mp4"
    }
  </script>
</div>

to inside of html under the vue.

So I found that I need to generate script tag by js but I'm not sure how to add

{ 
        "src": "https://s3.amazonaws.com/69693f173770c49cbb5.mp4"
}

to this script tag

Code what I have (simplified):

<div id="app">
    <div id="videocontent"></div>
</div>

el: "#app",
data: {},
created: function() {
    let playerContainer = document.createElement('div');
    playerContainer.setAttribute('data-player-id','912d05c');
    let flowplayerScript = document.createElement('script');
    flowplayerScript.setAttribute('src', '//cdn.flowplayer.com/players/7/flowplayer.async.js');
    flowplayerScript.innerText = {"src": "https://s3.amazonaws.com/productionadgate_video/eceae5886caaf69693f173770c49cbb5.mp4"};

    playerContainer.append(flowplayerScript);
    let container = document.getElementById('videocontent');
    container.append(playerContainer);
}

and flowplayerScript.innerText = {"src": "https://s3.amazonaws.com/productionadgate_video/eceae5886caaf69693f173770c49cbb5.mp4"}; is not correclty injected and player is always loading but not showing videos. Also I was tried tu use:

flowplayerScript.onload = function(){
     return {
         "src": "https://s3.amazonaws.com/productionadgate_video/eceae5886caaf69693f173770c49cbb5.mp4"
        }
};

but still not working :( and I'm getting the error like:

SyntaxError: Unexpected token $ in JSON at position 0 flowplayer.async.js:2

Valery Viktorovsky · Accepted Answer · 2018-07-25 22:12:25Z

1

You can use pure JavaScript installation, then init flowplayer in 'mounted' method.

new Vue({
  el: "#app",
  mounted: function() {
    this.$nextTick(function() {
      // select the above element as player container
      let containerEl = document.getElementById("videocontent")

      // install flowplayer into selected container
      flowplayer(containerEl, {
        clip: {
          sources: [
            { type: "application/x-mpegurl",
              src:  "//mydomain.com/video.m3u8" },
            { type: "video/mp4",
              src:  "//mydomain.com/video.mp4" }
          ]
        }
      })
    })
  }
})

jsfiddle

edited Jul 25, 2018 at 22:12

answered Jul 25, 2018 at 22:04

Valery Viktorovsky

6,7863 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bogdan Dubyk Over a year ago

well, I had such flowplayer initialization logic before, but there was the issue with adv videos, and after I contact flowplayer team and they tell me to use such a code....

Collectives™ on Stack Overflow

Add script to inside of vue template

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related