如何將此腳本轉換爲js文件？

我有這個腳本，我需要作爲一個.js文件，所以我可以多次使用它，而無需在任何地方的腳本多個副本，如調用腳本YTiFramePlayer.js。但是，也許我想更改promoVideo或videoId。我會怎麼做？如何將此腳本轉換爲js文件？

//YouTube iframe player 
//Load the iframe Player API 
var tag = document.createElement('script'); 

tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

var player; 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('promoVideo', { 
height: '390', 
width: '640', 
videoId: '00000', 
events: { 
     'onStateChange': onPlayerStateChange 
     } 
}); 
} 

function onPlayerStateChange(event) { 
if (event.data == YT.PlayerState.STOPPED) { 
stopVideo(); 
} 
} 

function startVideo() { 
$("#video").css("height", "calc(100vh - 48px)"); 
player.playVideo(); 
} 

function stopVideo() { 
player.stopVideo(); 
$("#video").css("height", "0px"); 
}

來源

2017-08-30 AwesomeTech10

它不是JS文件嗎？ –

所以你有JavaScript代碼，你需要它... JavaScript代碼？究竟是什麼問題？ – David

這不是一個JS文件。我想我可以讓它成爲.js，但是我如何使用videoid調用該播放器？ – AwesomeTech10

您可以將此保存爲如前面提到的.js文件，但您可以訪問其他地方的全局變量包裝的功能。例如：

的script.js：

//YouTube iframe player 
//Load the iframe Player API 
var ytPlayer = (function() { 
    var tag = document.createElement('script'); 
    var videoId; 
    var promoVideo = 'promoVideo'; 
    var player; 

    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    return { 
    init(id, promoVideo) { 
     videoId = id; 
     promoVideo = promoVideo; 
     onYouTubeIframeAPIReady(); 
    } 
    } 

    function onYouTubeIframeAPIReady() { 
    console.log('Setting up:', videoId, promoVideo) 
    player = new YT.Player(promoVideo, { 
     height: '390', 
     width: '640', 
     videoId: videoId, 
     events: { 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.STOPPED) { 
     stopVideo(); 
    } 
    } 

    function startVideo() { 
    $("#video").css("height", "calc(100vh - 48px)"); 
    player.playVideo(); 
    } 

    function stopVideo() { 
    player.stopVideo(); 
    $("#video").css("height", "0px"); 
    } 
})();

HTML：

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
    <script> 
     ytPlayer.init('a8a83sda', 'someOtherId') 
    </script> 
    </body> 

</html>

更多信息，請參見revealing module pattern。

來源

2017-08-30 19:00:57 Phix

謝謝！ +1 +1 – AwesomeTech10

ytPlayer.init（'a8a83sda'，'someOtherId'） - 什麼是a8a83sda？什麼是其他ID？ – AwesomeTech10

@ AwesomeTech10它們是promoVideo id（'promoVideo'）的videoId。你可以通過任何你需要的。 init函數在js中定義：'init（id，promoVideo）' – ivo

只是保存爲filename.js擴展

來源

2017-08-30 18:54:44 Bhautik

如何將此腳本轉換爲js文件？

回答

相關問題