<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script><!--jqueryを読み込み-->
<script>
$(function() {
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1){//iPhoneの処理
$('#player').css({display : 'none'});//PC用の動画を非表示に
$('.link_text').css({display : 'none'});//PC用のリンクを非表示に
$('#sp_player').css({display : 'block'});//スマフォ用プレイヤーを表示
}else if(agent.search(/iPad/) != -1){//iPadの処理
$('#player').css({display : 'none'});
$('.link_text').css({display : 'none'});
$('#sp_player').css({display : 'block'});
}else if(agent.search(/Android/) != -1){//Androidの処理
$('#player').css({display : 'none'});
$('.link_text').css({display : 'none'});
$('#sp_player').css({display : 'block'});
};
});
</script>
</head>
<body>
<div id="player"></div><!--ここにPC用の動画が読み込まれます-->
<p class="link_text">音声ありの動画は<a href="https://youtu.be/Yz_edq9mJrE" target="_blank">こちら</a></p><!--PC用のリンク-->
<script>//ここからiframe 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('player', {
height: '560',//動画に合わせて修正
width: '315',//動画に合わせて修正
videoId: 'Yz_edq9mJrE',//動画のIDを書く
playerVars:{
'cc_load_policy':'1',//字幕を表示
'controls':'0',//コントローラー非表示
'showinfo':'0',//動画の上のタイトル非表示
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();//自動再生
event.target.mute();//音声なしにする。音を出すときはunMuteにする。
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<div id="sp_player" style="display:none;"><!--スマフォ用プレイヤー-->
<iframe src="https://www.youtube.com/embed/Yz_edq9mJrE?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<p>動画を再生すると音が出ます</p>
</div>
</body>
</html>
