part02は複数の動画を１つのプレーヤーで切り替えるプレイリスト風
１．概要
part01をベースにしてプレーヤーの上にタブを配置して切り替える
２．コード
１）タグレイアウト
タブ用のラジオボタンとプレーヤーで構成してボタンが押されたらシークする
<body> <div class="entry-content"> <div class="iframe_tag"> <ul> <li><label> <input id="radio_name_w102ml_0" name="radi_id_w102ml_1_0" type="radio" onClick='window.open(url,"iframe_window_name_w102ml_0","")' checked> </input> <em>[button text]</em></label> </label></li> </ul> </div> <div> <iframe width="560" height="315" src="URL" name="iframe_window_name" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> name="iframe_window_name_w102ml_0" </div> </body>
<script>// <![CDATA[ // // 変数定義 // iframe_url [index_entrt][コンテンツURL,radio buttonタグ表示テキスト] // iframe_url_adds = [ ["https://www.youtube.com/embed/DeoPEHSAWq4","美人谷"], ["https://www.youtube.com/embed/11tELnT7DiA","樂此不疲"], ["https://www.youtube.com/embed/_RBAiUOToPY","牧野往事"], ["https://www.youtube.com/embed/SsvXE0BTqvs","賭注"] ]; div_class_name = 'iframe_tab'; // name for CSS idcode_w102ml = "_w102ml_"; // for multi contents // get number of entry-content for make TAG-SHEET // num_entry:タグシート作成用 entry-content出現順番号 - 1 element_entrys = document.getElementsByClassName("entry-content"); num_entry = element_entrys.length - 1; // get uniqe entry ID and set variables // index_entry:パラメータ識別用 コンテンツモジュール出現順番号 - 1 if(typeof index_entry_ml === "undefined"){ // ? 最初 entry-content index_entryが存在しない var index_entry_ml = 0; // index_entry var iframe_urls = []; // iframe_url } // iframe_url追加 iframe_urls[index_entry_ml] = []; for(var i = 0; i < iframe_url_adds.length; i ++) { iframe_urls[index_entry_ml][i] = []; iframe_urls[index_entry_ml][i][0] = iframe_url_adds[i][0]; iframe_urls[index_entry_ml][i][1] = iframe_url_adds[i][1]; } // // function // radio button onClick コールバック関数 // onClickでURL変更 function iframe_open(e) { var btn_id = e.target.id; // click button id var uids = btn_id.split( '_' ); var uid = uids[4]; // unique id for (var i = 0; i < iframe_urls[uid].length; i++) { // i番目のボタンが押されたかを判定 if ( btn_id == ('radio_id' + idcode_w102ml + i + '_' + uid) ) { var url = iframe_urls[uid][i][0]; window.open(url,'iframe_window_name' + idcode_w102ml + uid,''); break; } } } // make iframe_radio_tabS LIST // 下記タブを展開 // // <div class="iframe_tag"> // <ul> // <li><label> // <input // id="radio_name_w102ml_0" // name="radi_id_w102ml_1_0" // type="radio" // onClick='window.open(url,"iframe_window_name_w102ml_0","")' checked> // </input> // <em>[button text]</em></label> // function tabs_list() { // div tag を div class="entry-content" に配置 var div_tag = document.createElement('div'); div_tag.className = div_class_name; div_tag.id = 'div_id' + idcode_w102ml + index_entry_ml; element_entrys[num_entry].appendChild(div_tag); var element_div_tag = document.getElementById(div_tag.id); // ul tag var ul_tag = document.createElement('ul'); ul_tag.id = 'ul_id' + idcode_w102ml + index_entry_ml; element_div_tag.appendChild(ul_tag); var element_ul_tag = document.getElementById(ul_tag.id); // li tag for (var i = 0; i < iframe_urls[index_entry_ml].length; i++) { var li_tag = document.createElement('li'); li_tag.id = 'li_id' + idcode_w102ml + i + '_' + index_entry_ml; element_ul_tag.appendChild(li_tag); var element_li_tag = document.getElementById(li_tag.id); // label tag var label_tag = document.createElement('label'); label_tag.id = 'label_id' + idcode_w102ml + i + '_' + index_entry_ml; element_li_tag.appendChild(label_tag); var element_label_tag = document.getElementById(label_tag.id); // input tag radio button var input_radio = document.createElement('input'); input_radio.type = "radio"; input_radio.name = 'radio_name' + idcode_w102ml + index_entry_ml; input_radio.id = 'radio_id' + idcode_w102ml + i + "_" + index_entry_ml; element_label_tag.appendChild(input_radio); // 最初のbuttonをcheckedに if( i == 0) { document.getElementById(input_radio.id).checked = true; } else { document.getElementById(input_radio.id).checked = false; } // onClickイベント定義 iframeのurlを変更する input_radio.addEventListener("click", function (e) { iframe_open(e); }); // em tag radio buttonタグ表示テキストを設定 var em_tag = document.createElement('em'); em_tag.id = 'em_id' + idcode_w102ml + i + '_' + index_entry_ml; element_label_tag.appendChild(em_tag); document.getElementById(em_tag.id).innerHTML = iframe_urls[index_entry_ml][i][1]; var element_label_tag = document.getElementById(em_tag.id); } } // // main ここからスタート tabs_list(); // //<div> // <iframe width="560" height="315" src="about:blank" name="iframe_window_name" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> //</div> // // iframe initialize // // Change name iframe name="iframe_window_name_w102ml_0" // div tag を div class="entry-content" に配置 var div_tag = document.createElement('div'); div_tag.id = 'div_idif' + idcode_w102ml + index_entry_ml; element_entrys[num_entry].appendChild(div_tag); var element_div_tag = document.getElementById(div_tag.id); // iframe tag var iframe_tag = document.createElement('iframe'); iframe_tag.id = 'iframe_id' + idcode_w102ml + index_entry_ml; iframe_tag.width = "560"; iframe_tag.height = "315"; iframe_tag.src = iframe_urls[index_entry_ml][0][0]; iframe_tag.name = "iframe_window_name" + idcode_w102ml + index_entry_ml; iframe_tag.frameborder = "0"; iframe_tag.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"; iframe_tag.allowfullscreen = true; element_div_tag.appendChild(iframe_tag); var element_iframe_tag = document.getElementById(iframe_tag.id); index_entry_ml ++; // +1 for next entry-content // ]]></script> <script>// <![CDATA[ // // remove keyword link addEventListener( "DOMContentLoaded", function(){ var a=document.getElementsByClassName("iframe_tab"); if(a) for(var i=0;i<a.length;i++) for(var b=a[i].getElementsByClassName("keyword");b.length;) b[0].outerHTML=b[0].textContent}, !1); // ]]></script>
３）css
part01と同じ
４．完成
続く
