このスクリプトを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コードが必要です... JavaScriptコード？何が問題なのですか？ – David

JSファイルではありません。私はそれを.jsにすることができると思いますが、私はどのようにプレーヤーをvideoidで呼び出すでしょうか？ – AwesomeTech10

あなたは以前に述べたように.jsファイルとしてこれを保存することができfilename.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とは何ですか？他の何かは何ですか？ – AwesomeTech10

@ AwesomeTech10これは、promoVideo ID（ 'promoVideo'）のvideoIdです。あなたは何でも必要なものを渡すことができます。 init関数は、js： 'init（id、promoVideo）' – ivo

はちょうど

出典

2017-08-30 18:54:44 Bhautik

このスクリプトをjsファイルに変換するにはどうすればよいですか？

答えて

関連する問題