Submit Search
Upload
JavaScriptによるvideo audio要素のコントロール入門
•
0 likes
•
928 views
Yossy Taka
Follow
HTML5のvideo要素とaudio要素の利用方法 JavaScriptによる再生・停止・早送り・音量調整などのカスタマイズ if文やフラグなどの学習
Read less
Read more
Technology
Report
Share
Report
Share
1 of 25
Recommended
Bracketsを使おう
Bracketsを使おう
Yossy Taka
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
Yossy Taka
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
Yossy Taka
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Yossy Taka
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
Emmetの使い方
Emmetの使い方
Yossy Taka
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Yossy Taka
Recommended
Bracketsを使おう
Bracketsを使おう
Yossy Taka
JavaScriptによるgoogle maps apiの使い方
JavaScriptによるgoogle maps apiの使い方
Yossy Taka
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
JavaScriptのオブジェクト:Mathオブジェクト、Dateオブジェクト
Yossy Taka
Ajax非同期通信によるサーバー通信
Ajax非同期通信によるサーバー通信
Yossy Taka
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
スマホアプリ開発-プロモーション・集客・サポート・広告収入-
Yossy Taka
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
Yossy Taka
Emmetの使い方
Emmetの使い方
Yossy Taka
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-
Yossy Taka
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
Yossy Taka
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
漢は黙ってjQuery
漢は黙ってjQuery
Takuma Hanatani
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
SlideShare
Start React with Browserify
Start React with Browserify
Muyuu Fujita
初めてのConcrete5
初めてのConcrete5
Nobuko Kodera
春のJs祭2015 lt
春のJs祭2015 lt
Yuusuke Takeuchi
いまさら始めてみたRxJS
いまさら始めてみたRxJS
lion-man
Meteorというフレームワーク
Meteorというフレームワーク
rukiadia
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-
Yossy Taka
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめ
Yossy Taka
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
Yossy Taka
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
JavaScriptで学ぶajax通信
JavaScriptで学ぶajax通信
NTT Data
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
なんとなくjQueryでAjaxをつかってみる
なんとなくjQueryでAjaxをつかってみる
Hidetaka Okamoto
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
Yossy Taka
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成
Yossy Taka
More Related Content
Viewers also liked
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
Yossy Taka
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
漢は黙ってjQuery
漢は黙ってjQuery
Takuma Hanatani
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
SlideShare
Start React with Browserify
Start React with Browserify
Muyuu Fujita
初めてのConcrete5
初めてのConcrete5
Nobuko Kodera
春のJs祭2015 lt
春のJs祭2015 lt
Yuusuke Takeuchi
いまさら始めてみたRxJS
いまさら始めてみたRxJS
lion-man
Meteorというフレームワーク
Meteorというフレームワーク
rukiadia
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-
Yossy Taka
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめ
Yossy Taka
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
Yossy Taka
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
JavaScriptで学ぶajax通信
JavaScriptで学ぶajax通信
NTT Data
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
なんとなくjQueryでAjaxをつかってみる
なんとなくjQueryでAjaxをつかってみる
Hidetaka Okamoto
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
良太 増子
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
Viewers also liked
(20)
HTML5 Local Storageを利用したメモ帳アプリ
HTML5 Local Storageを利用したメモ帳アプリ
2時間で学ぶjQuery
2時間で学ぶjQuery
漢は黙ってjQuery
漢は黙ってjQuery
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
Start React with Browserify
Start React with Browserify
初めてのConcrete5
初めてのConcrete5
春のJs祭2015 lt
春のJs祭2015 lt
いまさら始めてみたRxJS
いまさら始めてみたRxJS
Meteorというフレームワーク
Meteorというフレームワーク
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Canvas入門01-図形描画とJS活用-
Canvas入門01-図形描画とJS活用-
JavaScript 基礎文法のまとめ
JavaScript 基礎文法のまとめ
Canvasでペイントアプリ作成
Canvasでペイントアプリ作成
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
JavaScriptで学ぶajax通信
JavaScriptで学ぶajax通信
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
なんとなくjQueryでAjaxをつかってみる
なんとなくjQueryでAjaxをつかってみる
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
jQueryで気をつけてほしいこと
jQueryで気をつけてほしいこと
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
More from Yossy Taka
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
Yossy Taka
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成
Yossy Taka
Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門
Yossy Taka
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Yossy Taka
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
Yossy Taka
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
Yossy Taka
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
More from Yossy Taka
(9)
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
canvasによるアナログ時計の作成
canvasによるアナログ時計の作成
Canvasによるデジタル時計制作入門
Canvasによるデジタル時計制作入門
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
JavaScript Basic 01
JavaScript Basic 01
Recently uploaded
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Recently uploaded
(10)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
JavaScriptによるvideo audio要素のコントロール入門
1.
video要素とaudio要素 JavaScriptでvideoとaudioを コントロール
2.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 2 映像ファイルの制御
3.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 3 映像の制御の方法 • HTML5の機能である「videoタグ」を利用 して、映像の再生が可能 • 制御は、JavaScriptで行うことが出来る
4.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 4 まずは videoタグを確認
5.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 5 videoタグ • 基本の記述 • 値が必要な属性 – width, height • 値が不要な属性 – autoplay, controls, loop, muted <video src=“ファイル名”属性></video>
6.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 6 ファイルフォーマットの問題 • 対応映像フォーマット(http://caniuse.com/#search=video) – H.264(拡張子 mp4) • IE、Safari、Chromeの最新版でサポート – WebM(拡張子 wevm) • Chrome、Firefox、Operaの最新版でサポート • 問題点 – 両フォーマットに対応したブラウザは、 Chromeのみ
7.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 7 現実的な記述方法 • videoタグ内にsourceタグを記述 <video 属性たち・・・> <source src=“ファイル名.mp4”> <source src=“ファイル名.wevm”> </video>
8.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 8 JSによる制御
9.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 9 コントローラを付けてみよう • 映像の操作 – 映像ファイルの中には、再生ヘッド(のイ メージ)が存在します。 – 再生ヘッドを制御することが、映像を制御す ることになります。 • JSによる映像操作 – videoタグを「HTMLVideoElement」という オブジェクトとして利用 – getElementByIdなどでオブジェクトを作成。
10.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 10 コントローラを付けてみよう • 再生ヘッドの一時停止と再開 – オブジェクト.pause(); • 再生ヘッド移動を一時停止 – オブジェクト. play(); • 再生ヘッド移動を再開
11.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 11 一時停止と再生を 一つのボタンに まとめる
12.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 12 If文と変数で 実現できます
13.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 13 この変数を フラグと言います
14.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 14 コントローラを付けてみよう • 戻る・進む などの機能を追加する – オブジェクト.currentTime • 再生ヘッドの場所を知る – オブジェクト.currentTime = 秒 • 再生ヘッドを移動する
15.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 15 音量ON/OFF
16.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 16 音量設定 • 音量ON/OFF設定 – オブジェクト.muted = true もしくは false • trueで音量OFF • 音量の設定 – video.volume = 0~1 • 0が音量OFF、1が音量最大
17.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 17 音楽ファイルの制御
18.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 18 音楽の制御の方法 • HTML5の機能である「audioタグ」を利用 して、音楽ファイルの再生が可能 • 制御は、JavaScriptで行うことが出来る • テキストのようにAudioという命令でも同 様の制御が行える
19.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 19 まずは audioタグを確認
20.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 20 videoタグ • 基本の記述 • 値の必要な属性 – src : ファイル名指定 – preload : none(ファイルを事前に読み込まない) auto (ファイルを事前に読み込み) • 値が不必要な属性 – autoplay : 自動再生 – controls : コントローラー – loop : 繰り返し <auido src=“ファイル名”属性></video>
21.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 21 スマホの問題 • 対応フォーマット(http://caniuse.com/#search=video) – iOS • wav,aif,mp3,aac – Android • wav,mp3,ogg,aac • 問題点 – 複数の音を同時に鳴らせない – Androidではバージョンにより対応していない 場合がある
22.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 22 現実的な記述方法 • audioタグ内にsourceタグを記述 <audio 属性たち・・・> <source src=“ファイル名.mp3”> <source src=“ファイル名.ogg”> </audio>
23.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 23 JSによる制御
24.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 24 コントローラを付けてみよう • JSによる音楽操作 – いつものように、audioタグをオブジェクト として利用 – getElementById などでオブジェクトを作成
25.
Copyright Ⓒ Yoshihiro
Takahashi 2012 All Rights Reserved. 25 音を鳴らしてみよう • オブジェクト.pause(); – 一時停止 • オブジェクト. play(); – 再生