我需要插入这样的脚本
<div data-player-id="912d05c">
<script src="//cdn.flowplayer.com/players/7/flowplayer.async.js">
{
"src": "https://s3.amazonaws.com/69693f173770c49cbb5.mp4"
}
</script>
</div>
到vue下的html内部。
所以我发现我需要通过js生成script
标签但我不知道如何添加
{
"src": "https://s3.amazonaws.com/69693f173770c49cbb5.mp4"
}
到这个script
标签
我所拥有的代码(简化):
<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);
}
和 flowplayerScript.innerText = {"src": "https://s3.amazonaws.com/productadgate_video/eceae5886caaf69693f173770c49cbb5.mp4"};
未正确注入(inject),播放器始终加载但不加载显示视频。我也尝试过使用:
flowplayerScript.onload = function(){
return {
"src": "https://s3.amazonaws.com/productionadgate_video/eceae5886caaf69693f173770c49cbb5.mp4"
}
};
但仍然无法正常工作:(并且我收到如下错误:
SyntaxError: Unexpected token $ in JSON at position 0 flowplayer.async.js:2
最佳答案
您可以使用纯 JavaScript 安装,然后在“mounted”方法中初始化 flowplayer。
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" }
]
}
})
})
}
})
关于javascript - 将脚本添加到 vue 模板内部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51527908/