JavaScript/Video
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript｜ Video
~
//RIGHT:
//[[WebDesign/JavaScript]]
//#clear
HTML + CSS + JavaScriptによるページのサンプルソースを紹介...
HTML5で実装された＜VIDEO＞と＜CANVAS＞を利用しています。
~
***はじめに
VIDEO要素の再生、一時停止、はじめに戻す・・といった操作は...
-video要素.play(); 再生
-video要素.pause(); 一時停止
-video要素.currentTime = 0; 頭出し
-video要素.volume += 0.25; 音量の制御 などなど
~
例えば、以下のようなコードがあると、動画の再生を制御でき...
var v = document.getElementsByTagName("video")[0];
v.play();
~
***事例1 VIDEO → CANVAS [[→DEMO>https://design.kyusan-u...
[draw]を押すと、 VIDEOタグで配置された動画が、タイマーを...
後のサンプルの前段となる基礎の確認です。
~
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"><...
<link rel="stylesheet" type="text/css" href="sam...
</head>
<body>
<video id="myVideo" width="480" height="360"
src="sample.webm" autoplay loop></video>
<canvas id="myCanvas" width="480" height="360"><...
<button id="myButton" onclick="start()">draw</bu...
</body>
</html>
~
''sample.css'' ｜ ページのビジュアル
省略
~
''sample.js'' ｜ ページのふるまい
function start(){
var myTimer = setInterval(Draw,1000/30);
}
function Draw(){
var cnvs = document.getElementById("myCanvas");
var dc = cnvs.getContext("2d");
dc.drawImage(myVideo,0,0,480,360);
}
~
参考：drawImage関数の書き方
dc.drawImage(cnvs, x, y)
dc.drawImage(cnvs, x, y, width, height)
ここで、dcは２次元の[[デバイスコンテキスト>Google:JavaScr...
~
~
***事例2 フィルタリング [[→DEMO>https://design.kyusan-u...
事例１をそのまま応用しています。VIDEOからCANVASへの転送の...
''index.html'' ｜ ページの文書構造
省略：事例１と同じです。
~
''sample.css'' ｜ ページのビジュアル
省略
~
''sample.js'' ｜ ページのふるまい
function start(){
var myTimer = setInterval(Draw,1000/30);
}
function Draw(){
var cnvs = document.getElementById("myCanvas");
var dc = cnvs.getContext("2d");
dc.drawImage(myVideo,0,0,480,360);
var pxData = dc.getImageData(0,0,480,360);
for(var y=0; y<360; y++){
for(var x=0; x<480; x++){
var i = ( y*480 + x ) * 4;
var m = 0.299*pxData.data[i]
+0.587*pxData.data[i+1]
+0.114*pxData.data[i+2];
pxData.data[i] = pxData.data[i+1] = pxData.d...
pxData.data[i+3] = 255; //α値
}
}
dc.putImageData(pxData,0,0);
}
-参考１：画素の色値の格納
画像データは、配列 pxData.data[0]から順に、R,G,B,αの４つ...
pxData.data[0] ：R値 0 -255
pxData.data[1] ：G値 0 -255
pxData.data[2] ：B値 0 -255
pxData.data[3] ：α値 0 -255
よって、例えば 480*360 の画像の場合 480*360*4 個の配列要...
-参考２：モノクロ化（画像の輝度）
RGBを足して３で割る・・という単純計算ではなく、通常はRGB...
Y = 0.299 R + 0.587 G + 0.114 B
~
~
***事例3 Drop Video [[→DEMO>https://design.kyusan-u.ac....
ページ上に置かれたVIDEO要素に、手元の動画ファイルをドロッ...
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"></sc...
<link rel="stylesheet" type="text/css" href="sample...
</head>
<body>
<video autoplay loop controls poster="DropFilesHere...
<video autoplay loop controls poster="DropFilesHere...
<video autoplay loop controls poster="DropFilesHere...
<video autoplay loop controls poster="DropFilesHere...
<p id="progress"></p>
</body>
</html>
~
''sample.css'' 要点のみ｜ ページのビジュアル
video {
float: left;
margin: 40px;
width: 360px;
height: 240px;
object-fit: cover;
background-color: silver;
}
以下省略
~
''sample.js'' ｜ ページのふるまい
window.onload =function(){
var vobj = document.getElementsByTagName("video");
for( i=0; i<vobj.length; i++){
vobj[i].addEventListener("dragover", DragoverEvent, ...
vobj[i].addEventListener("drop", DropEvent, false);
}
}
function DragoverEvent(ev){
ev.preventDefault();
}
function DropEvent(ev){
ev.preventDefault();
DropVideo(ev);
}
function DropVideo(ev){
var targetObj = ev.currentTarget;
var file = ev.dataTransfer.files[0];
var fileType = file.name.slice(-4).toLowerCase();
if( fileType == "webm" || fileType == ".ogv" || fileTy...
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onprogress = function(ev){
if( ev.lengthComputable == true && ev.total > 0 ) {
var rate =( ev.loaded *100 / ev.total ).toFixed(...
document.getElementById('progress').innerHTML = ...
}
}
reader.onloadend = function(){
document.getElementById('progress').innerHTML = "";
targetObj.setAttribute("src",reader.result);
}
}else{
alert("File available only WebM, ogv, mp4");
}
}
~
~
終了行:
*JavaScript｜ Video
~
//RIGHT:
//[[WebDesign/JavaScript]]
//#clear
HTML + CSS + JavaScriptによるページのサンプルソースを紹介...
HTML5で実装された＜VIDEO＞と＜CANVAS＞を利用しています。
~
***はじめに
VIDEO要素の再生、一時停止、はじめに戻す・・といった操作は...
-video要素.play(); 再生
-video要素.pause(); 一時停止
-video要素.currentTime = 0; 頭出し
-video要素.volume += 0.25; 音量の制御 などなど
~
例えば、以下のようなコードがあると、動画の再生を制御でき...
var v = document.getElementsByTagName("video")[0];
v.play();
~
***事例1 VIDEO → CANVAS [[→DEMO>https://design.kyusan-u...
[draw]を押すと、 VIDEOタグで配置された動画が、タイマーを...
後のサンプルの前段となる基礎の確認です。
~
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"><...
<link rel="stylesheet" type="text/css" href="sam...
</head>
<body>
<video id="myVideo" width="480" height="360"
src="sample.webm" autoplay loop></video>
<canvas id="myCanvas" width="480" height="360"><...
<button id="myButton" onclick="start()">draw</bu...
</body>
</html>
~
''sample.css'' ｜ ページのビジュアル
省略
~
''sample.js'' ｜ ページのふるまい
function start(){
var myTimer = setInterval(Draw,1000/30);
}
function Draw(){
var cnvs = document.getElementById("myCanvas");
var dc = cnvs.getContext("2d");
dc.drawImage(myVideo,0,0,480,360);
}
~
参考：drawImage関数の書き方
dc.drawImage(cnvs, x, y)
dc.drawImage(cnvs, x, y, width, height)
ここで、dcは２次元の[[デバイスコンテキスト>Google:JavaScr...
~
~
***事例2 フィルタリング [[→DEMO>https://design.kyusan-u...
事例１をそのまま応用しています。VIDEOからCANVASへの転送の...
''index.html'' ｜ ページの文書構造
省略：事例１と同じです。
~
''sample.css'' ｜ ページのビジュアル
省略
~
''sample.js'' ｜ ページのふるまい
function start(){
var myTimer = setInterval(Draw,1000/30);
}
function Draw(){
var cnvs = document.getElementById("myCanvas");
var dc = cnvs.getContext("2d");
dc.drawImage(myVideo,0,0,480,360);
var pxData = dc.getImageData(0,0,480,360);
for(var y=0; y<360; y++){
for(var x=0; x<480; x++){
var i = ( y*480 + x ) * 4;
var m = 0.299*pxData.data[i]
+0.587*pxData.data[i+1]
+0.114*pxData.data[i+2];
pxData.data[i] = pxData.data[i+1] = pxData.d...
pxData.data[i+3] = 255; //α値
}
}
dc.putImageData(pxData,0,0);
}
-参考１：画素の色値の格納
画像データは、配列 pxData.data[0]から順に、R,G,B,αの４つ...
pxData.data[0] ：R値 0 -255
pxData.data[1] ：G値 0 -255
pxData.data[2] ：B値 0 -255
pxData.data[3] ：α値 0 -255
よって、例えば 480*360 の画像の場合 480*360*4 個の配列要...
-参考２：モノクロ化（画像の輝度）
RGBを足して３で割る・・という単純計算ではなく、通常はRGB...
Y = 0.299 R + 0.587 G + 0.114 B
~
~
***事例3 Drop Video [[→DEMO>https://design.kyusan-u.ac....
ページ上に置かれたVIDEO要素に、手元の動画ファイルをドロッ...
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"></sc...
<link rel="stylesheet" type="text/css" href="sample...
</head>
<body>
<video autoplay loop controls poster="DropFilesHere...
<video autoplay loop controls poster="DropFilesHere...
<video autoplay loop controls poster="DropFilesHere...
<video autoplay loop controls poster="DropFilesHere...
<p id="progress"></p>
</body>
</html>
~
''sample.css'' 要点のみ｜ ページのビジュアル
video {
float: left;
margin: 40px;
width: 360px;
height: 240px;
object-fit: cover;
background-color: silver;
}
以下省略
~
''sample.js'' ｜ ページのふるまい
window.onload =function(){
var vobj = document.getElementsByTagName("video");
for( i=0; i<vobj.length; i++){
vobj[i].addEventListener("dragover", DragoverEvent, ...
vobj[i].addEventListener("drop", DropEvent, false);
}
}
function DragoverEvent(ev){
ev.preventDefault();
}
function DropEvent(ev){
ev.preventDefault();
DropVideo(ev);
}
function DropVideo(ev){
var targetObj = ev.currentTarget;
var file = ev.dataTransfer.files[0];
var fileType = file.name.slice(-4).toLowerCase();
if( fileType == "webm" || fileType == ".ogv" || fileTy...
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onprogress = function(ev){
if( ev.lengthComputable == true && ev.total > 0 ) {
var rate =( ev.loaded *100 / ev.total ).toFixed(...
document.getElementById('progress').innerHTML = ...
}
}
reader.onloadend = function(){
document.getElementById('progress').innerHTML = "";
targetObj.setAttribute("src",reader.result);
}
}else{
alert("File available only WebM, ogv, mp4");
}
}
~
~
ページ名:
