I am using Vuejs and I need to insert script tags in the DOM dynaically to embed JWPlayer videos in this way:
<body>
<!-- HTML content -->
<script src="//content.jwplatform.com/players/KZVKrkFS-RcvCLj33.js"></script>
<!-- More HTML content -->
<script src="//content.jwplatform.com/players/ANOTHER-ID-ANOTHER-PLAYERID.js"></script>
</body>
I have used without results: v-html directive to render the html tags. As well v-bind:src but neither execute the code. I found this solution but it did not work either: How to add external JS scripts to VueJS Components
I used this solution but the script tags (one for each video) must be inserted in the body (not in head): they should create div tags containers and embed the videos. The problem is that the embeded JWPlayer file contains a document.write() statement. And the browser console says: "A call to document.write() from an asynchronously-loaded external script was ignored."
Is there anyway to achieve this?
-
Well, what went wrong with the approach you linked? It seems sensible.Botje– Botje2017年12月12日 08:19:15 +00:00Commented Dec 12, 2017 at 8:19
-
I am also unable to load jwplayer reliably in vue.jschovy– chovy2018年11月01日 22:07:12 +00:00Commented Nov 1, 2018 at 22:07
1 Answer 1
The link you provided should work.
You probably just need to wait for the script to load before you can use JWPlayer.
const script = document.createElement('script')
script.onload = () => {
// Now you can use JWPlayer in here
}
script.src = '//content.jwplatform.com/players/MEDIAID-PLAYERID.js'
document.head.appendChild(script)
Also make sure you only do this one time for the first component that requires it, from that point onward JWPlayer will be loaded and you can use it without inserting another script tag.