YouTubeみたいな動画を作成できるhtml,css,Javascriptの紹介(未完成品)参考 #JavaScript

htmlで、何とかしたい、という願望から組み始めました。まだ、サイズは小さいですが。大きくすると投稿できないという、難点のもとで組んでいます。

現在出来ているのが下記の通りです。

スクリプの紹介。未だ出来上がっていません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="imge/name.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="たっちゃん,studio。">
<title>studio</title>
<link rel="stylesheet" href="studio.css" type="text/css">
<script>
if( screen.width/2 - 20 > window.innerWidth || screen.height/2 - 20 > window.innerHeight){
alert("ページが小さ過ぎます。");
}
</script>
<script src="studio.js" defer></script>

</head>
<body style="background-image : url(imge/bgsc_1.png);" onload="mystrto();">
                            <!-- stato studio -->
    <div id="flex1">
        <div class="content1">

            <div id="box01">
                <table border="1"><tr><td id="my1td1">　　　	<br>　　</td><td></td><td><span id="my1td3">0000</span></td></tr>
 <tr><td></td><td>    <div id="my1_1"></div><!--<video controls src="imge/una00.mp4" width="640" autoplay ></video>-->
</td><td></td><tr></table>
	        </div>
            <div id="box02"><!--ここから行を1個少なくしている-->
                <table><tr><td id="my2td1"></td><td></td></tr>
 <tr><td></td><td><span id="myt2_1"><img src="imge/gall.png" width="128" height="128"></span></td></tr></table>
            </div>
            <div id="box03">
                 <table><tr><td id="my3td1"></td><td></td></tr>
 <tr><td></td><td><span id="myt3_1"><img src="imge/man1.png" width="128" height="128"></span></td></tr></table>
            </div>
            <div id="box04">
                <table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_1"style="text-shadow: 2px 3px 4px #aaaaff;"><mark><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></mark></div>
<!-- font-size:20px;  text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;  -->
</td></tr></table>
            </div> 
        </div>
        <div class="content2">
            <form>
                <input type="button" value=" Relode " onClick="Relode();">
                <input type="button" value=" Stato " onClick="Stato1();">

                <input type="button" value=" Re_Stato " onClick="Re_Stato();">
            </form>
            <hr>
            <form name="my_form_0">
                <input type="radio" checked onchange="radio_glope1(1);">demo　
                <input type="radio" onchange="radio_glope1(2);">non　
                <input type="radio" onchange="radio_glope1(3);">readプレー<br>

                <input type="checkbox" checked onchange="chec_g1_1(checked);">Video S off 
                <input type="checkbox" onchange="chec_g1_2(checked);">audio S off
                <input type="checkbox" onchange="chec_g1_3(checked);">予備
            </form>
      <hr>
      <!--<div id='audio0'>0<br><audio src="voise/myout2_0.wav" type="audio/wev" controls autoplay></audio></div>-->
      <div id='audio1'>1<br><audio src="voise/" controls muted></audio></div>
      <div id='audio2'>2<br><audio src="voise/" controls muted></audio></div>
      <div id='audio3'>3<br><audio src="voise/" controls muted></audio></div>
  </div>
</div>  
<div id="flex2">
  <div class="content3">
	<div id="test_my0">test0</div>
	<hr>
	<b>form</b><br>
	<form name="myfile">
	  <input type="file" id="selfile" accept=".txt" />
	  <div id="errmessage"></div>
	  <textarea name="texta" id="mytextr"></textarea>
	</form>
	<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
	<hr>
	<span id="my_in_a_text" onclick="it_test2('test');">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
	<input type="button" value="テキストリード" onclick="read();"><br>
	<p id="mfl">text</p>
	<p id="my6_1"><font size="6" color="#f0f">あ</font><font size="1">っ</font><font size="3">かわった</font></p>
  </div>
</div>
<div id="flex_end">
  <div class="content_end">
    <!-- end -->
    <hr>
    <div style="text-align: center;">
      <p>tattyan(<a href="https://tattyan0-0.sakura.ne.jp/" name="administrator" target="~_blank">たっちゃん</a>) by 2023/11/14- </p>
    </div>
  </div>
</div>
</body>
<!--<script src="my_js.js" defer></script>-->
</html>

CSS

@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */


/* test */

body { 
    margin: 0px;
    background:#ffbbff;
}




#flex1 {
    display: flex;
}
#flex2 {		
    display: flex;
}
#flex_end {		
    display: flex;
}

.content1 {
    float: left;
    background-color: #dcffb8;
    border: 5px solid #5abbe4;
    padding: 0px;
    width: 1376px;/* *1280+32+64 *720+32*10 */
    height: 784px;
    justify-content: flex-start;
}
.content2 {
    float: left;
    border: 5px solid #a1d9f1;
    padding: 0px;
    width: 320px;
    height: 784px;
    justify-content: flex-end;
}

.content3 {
    float: left;
    padding: 32px;
	justify-content: flex-end;
}
.content_end {
    float: left;
    padding: 32px;
	width: 100%;
	justify-content: flex-end;
}

/* まーかー　の例 */
.mark1 {
  background-color: #80ff80;
  color: #ffffff;
  padding: 14px;
}
.mark2 {
  background: linear-gradient(transparent 40%, #FFF100 0%);	
}	


#test_my0 {
	color: red;
}

#box01 { 
  background-color: #1995ee; 
  position: fixed; 
  top: 0;/* タグによる位置の既定の位置に配置無視 */
  left: 0;/* 無視 */
  /*width: 64px; 
  height: 64px;*/ 
} 
/* 変わらない */
#my1td1 {
	width: 32px;
	height: 32px;
}
#my1td3 {
    width: 32px;
}

#box02 { 
  /*background-color: #ff6a00;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
  left: 0;/* 既定の位置 */
  /*width: 64px; 
  height: 64px;*/ 
} 

#my2td1 {
	width: 60px;
	height: 280px;
}

#box03 { 
 /* background-color: #ffd800; */
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 スクロール*/
  left: 0;/* スクロール */
  /*width: 64px; 
  height: 64px; */
} 

#my3td1 {
	width: 550px;
	height: 280px;
}

#box04 { 
 /* background-color: #26b138;*/ 
  position: fixed;
  top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
  left: 0;/* 同じ位置 */
 /* width: 58px; 
  height: 58px; */
} 
 #my4td1 {
	width: 200px;
	height: 350px;
}




/*
#selfile {
    width: auto;
    height: auto;
}


.obje {
    width: auto;
    height: auto;
}
*/
#mytextr {
    word-wrap: normal;
    width: 400px;
    height: 150px;
    overflow: scroll;
    /* valuetext :"test.txt"*/
    /* border: 1px solid white;*/
    background: #fff;
    padding: 10px;
    /*  box-sizing: border-box;*/
    word-break: break-all;
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.75rem;
    margin-top: 10px;
}

#test_my1 {
	 color: red;
}

javascript

// ver. 1_00(test)

/*
 2024/03/14-03/21-
 ///////////////////////////////
 256×144（144p）
 427×240（240p） 
 640×360（360p）
 720×480（SD）         o
1280×720（HD）         o
1920×1080（1080p）     x

720 * 1280     9:16   o

1,080 * 1,920× 9:16    x
 
 
//   it html 
<div id="test_my0">test0</div>
	<hr>
	<b>form</b><br>
<form name="myfile">
    <input type="file" id="selfile" accept=".txt" />
    <div id="errmessage"></div>
    <textarea name="texta" id="mytextr"></textarea>
</form>
<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
<hr>
	<form name="my_form_0">
	　  <input type="radio" checked onchange="radio_glope1(1,checked)">Radio1 <input type="radio" onchange="radio_glope1(2,checked)">Radio2<br>
	</form>
	<hr>	
	<span id="my_in_a_text" onclick="it_test2('test')">てきすと</span><br>
	<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
    <input type="button" value="テキストリード" onclick="read()"><br>
	<p id="mfl">text</p>
 
<div id="test_my1">test1</div>
// 
*/
// nn = true,false


const maxtime = 7200;
//
let timerId = 0; //タイマーID
let intrtim = 1000; //インターバルタイマーの時間
let singlsyot = false;
let tim_end = false;
let mycount = -3;

let timId1 = 1;
let puleymiu = "puleymiu";
let mykyoku = "mykyoku";
let mloop = '';// 'loop ';

let video_voise_on = false;
let audio_voise_on = true;
let sonota_on = false;

let v_muted = "muted ";// ""
let a_muted = "";// "muted "
function mystrto() {
    text_read();
    clearInterval(timId1);
    document.querySelector('#my1_1').innerHTML = '<video controls src="imge/una00.mp4" width="640" muted></video>';// muted
    document.querySelector('#audio1').innerHTML = 'Stato Up<br><audio src="voise/una_kiruna.wav" type="audio/wev" controls></audio>';
    timId1 = setInterval('demoPlay()', 1000);

}
function demoPlay() {
  
    clearInterval(timId1);
    clearInterval(timerId);
    tim_end = false;
    mycount = -3;
}


function chec_g1_1(in_this) {
    if (in_this) {
        video_voise_on = false;
        v_muted = "muted ";
    } else {
        video_voise_on = true;
        v_muted = "";
    }
    alert(video_voise_on);
}

function chec_g1_2(in_this) {
    if (in_this) {
        audio_voise_on = false;
        a_muted = "muted ";
    } else {
        audio_voise_on = true;
        a_muted = "";
    }
    alert(audio_voise_on);
}


function chec_g1_3(in_this) {
    if (in_this) {
        sonota_on = true;
    } else {
        sonota_on = false;
    }
    alert(sonota_on);
}

// Radio Button change
function radio_glope1(int_r_no) {  //2,3エレメントRadio noだけで良い?変わった時しか来ないから

    alert(int_r_no);
    if (int_r_no == 1) {
        document.my_form_0.elements[1].checked = false;
        document.my_form_0.elements[2].checked = false;
        // Radio2が選択
    }
    if (int_r_no == 2) {
        document.my_form_0.elements[0].checked = false;
        document.my_form_0.elements[2].checked = false;
        // Radio2が選択
    }
    if (int_r_no == 3) {
        document.my_form_0.elements[0].checked = false;
        document.my_form_0.elements[1].checked = false;
        // Radio1が選択
    }
}

function Stato1() {
    mycount = -3;
    tim_end = false;
    if (video_voise_on) {
        document.querySelector('#my1_1').innerHTML = '<video src="imge/una00.mp4" width="640" autoplay></video>'; 
        
    }else {
        document.querySelector('#my1_1').innerHTML = '<video src="imge/una00.mp4" width="640" muted autoplay></video>';
    }
    if (audio_voise_on) {
        document.querySelector('#audio1').innerHTML = 'una_kiruna<br><audio controls src="voise/una_kiruna.wav" autoplay></audio>';
    } else {
        document.querySelector('#audio1').innerHTML = 'una_kiruna<br><audio controls src="voise/una_kiruna.wav" muted autoplay></audio>';
    }
   
    timerId = setInterval('mytfunc()', intrtim);
}





let bol_mymy = "false";
function mytfunc() {

    // 訳の分らん割り込みが発生している
        mycount += 1;
 
 //   alert('リード'+String(mycount));
    if (mycount == 0) {
     //   document.querySelector('#my1_1').innerHTML = '<video controls src="imge/una00.mp4" width="640" autoplay muted></video>';// muted
        // document.querySelector('#audio0').innerHTML = `${puleymiu} ${mykyoku}<br><audio controls src="voise/myout2_0.wav" type="audio/wev" autoplay></audio>`;//myout2_0 // una_kiruna
        document.querySelector('#audio2').innerHTML = puleymiu+" "+mykyoku+'<br><audio controls src="voise/myout2_0.wav" '+a_muted+'autoplay></audio>';
    }



 
    if (mycount == 8) {
       // alert('5==5');終わった後なんで出てくるんや。
        document.querySelector('#my4_1').innerHTML = '<mark class="mark1"><font size="7" color="#f0f">あ</font></mark><font size="1">っ</font><mark clas="mark2"><font size="3">かわった</font></mark>';
    
    }
    if (mycount == 16) { //
        document.querySelector('#my1_1').innerHTML = '<video controls src="imge/rec_2023_07_30_1.mp4" width="640"' + v_muted + 'autoplay></video>';// muted
    }
    //rec_2023_07_30_1

    if (mycount == 20) {

        document.querySelector('#audio1').innerHTML = puleymiu + " " + mykyoku +'<br><audio controls src="voise/una_kiruna.wav" '+a_muted+'autoplay></audio>';
    }

    if (mycount == 610) { //タイムアウト
        tim_end = true;
    }

	if(mycount >= 0){
		let sec = mycount;
		let hour = Math.floor(sec / 3600);
		let min = Math.floor(sec % 3600 / 60);
		let rem = sec % 60;
		document.querySelector('#my1td3').innerHTML = mycount.toString().padStart(4, '0')+'<font size="1"><br>'+`${hour}:${min}:${rem}`+'</font>';//("00000" + num1).slice(-5);`${hour}時間${min}分${rem}秒`
	}else{
		document.querySelector('#my1td3').innerHTML = mycount.toString().padStart(4, '0');
	}
	
    if (mycount > maxtime) {
         tim_end = true;
    }


    if (tim_end==true) {
        bol_mymy = "true";
    } else {
        bol_mymy = "false";
    }


 //   alert(bol_mymy); 
    if (tim_end==true) {
      
        mycount = 0;
        clearInterval(timerId);
      //  alert('終わり' + String(mycount));
    }
  

  //  clearInterval(timerId);



}

function it_test2(test) {
 //   document.querySelector('#my6_1').innerHTML = 'あいうえお';
    document.querySelector('#my_in_a_text').innerHTML = test + 'あいうえお';
}

function Relode() {
    location.reload();
}



function Re_Stato() {
  //  alert('fast');
    clearInterval(timerId);
    
    
//	document.querySelector('#my1_0').innerHTML = 'ようこそ World!'; 
    document.querySelector('#my1_1').innerHTML = '<video controls src="imge/una00.mp4" width="640"' + v_muted + 'autoplay></video>';// muted
    document.querySelector('#audio3').innerHTML = puleymiu + " " + mykyoku + '<br><audio controls src="voise/myout2_0.wav"" ' + a_muted + 'autoplay></audio>';
    //これで何で動くのかが理解出来ていない。
}






// text_read();  //一回だけ実行してやれば常駐して消すまで有効に成る　毎回実行すると得られない。
//let this_file = "";
function text_read() {
   //  alert('テキストリード');
    var obj1 = document.getElementById("selfile");

    obj1.addEventListener("change", function(evt) { //"change"
        var file = evt.target.files;
        var reader = new FileReader();
        reader.readAsText(file[0]);
        reader.onload = function(ev) {
            document.myfile.texta.value = reader.result;
        }

        //エラー処理
        reader.onerror = function(e) {
            //エラーメッセージを配列に格納する
            var errmes = new Array(
                "",
                "ファイルが見つかりません！",
                "セキュリティエラーが検出されました！",
                "ファイルの読込が中断されました！",
                "ファイルの読み込み権限がありません！",
                "ファイルサイズが大き過ぎます！"
            );
            //エラーをinnerHTMLで書き出す
            var obj2 = document.getElementById("errmessage");
            obj2.innerHTML = errmes[reader.error];// obj2.innerHTML = errmes[reader.error.code];
        }

    }, false);
}


//              form end
// no coll
function read() {
	alert("my_mese");
    let redotext = document.querySelector('#mytextr').value;
	alert(redotext);
	
    // document.querySelector('#mfl').innerHTML = redotext.replace(/\n/g, '<br>');
    let readlin = [];
    readlin[0] = '';
    let ii = 0;
	
    for (let i = 0; i < redotext.length; i++) {
        if (!redotext[i].includes('\n')) {
            readlin[ii] += redotext[i];
        } else {
            ii++;
            readlin[ii] = '';
        }
    }
    document.querySelector('#mfl').innerHTML = readlin;
}

開いていて、終わらないうちに再起動すると少しおかしい挙動をしています。

バグを取った上でお使いください。
使用に関しては未完成品ですし、枠を掛ける気も、ありません。

ファイルとフォルダー

以上。