ハゲのプログラミング

プログラムのこと意外は書かないので更新は全然しない可能性が高いです。 個人のメモってことでよろしく!

カテゴリ:HTML

HTML5より追加された機能
<!--自動で音声を再生-->
<audio src="test.mp3" autoplay></audio>

<!--コントロールバー表示-->
<audio src="test.mp3" controls></audio>

<!--ループ再生の設定-->
<audio src="test.mp3" autoplay controls loop></audio>

<!--全て設定-->
<audio src="test.mp3" autoplay controls></audio>

以上のように表示され、自動で再生されれば成功。


全文はこんな感じ。
<!--コメントテスト-->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
</head>
<body>
<audio src="test.mp3" autoplay controls loop></audio>
</body>
</html>

<メモ>
・属性なしでもエラーは出ないがバーも出ないので事実上再生不可能(?)(2015/05/08)
・「.ogg」以外のサンプルが無いが「.mp3」でも再生可能でした(2015/05/08)


    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

HTML5より追加された機能。
<!--以下をbodyの中に入れることで再生可能。特に変更ない場合-->
<video src="test.mp4"></video>

<!--自動で動画を再生-->
<video src="test.mp4" autoplay></video>

<!--コントロールバー表示-->
<video src="test.mp4" controls></video>

<!--動画の大きさを指定して再生-->
<video src="test.mp4" width="640" height="400"></video>

<!--全て設定(指定時には属性毎に半角スペースを空けること)-->
<video src="test.mp4" autoplay controls width="640" height="400"></video>

以上のように表示され、自動で再生されれば成功。


全文はこんな感じ
<!--コメントテスト-->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</title>
</head>
<body>
<video src="test.mp4" autoplay controls width="640" height="400"></video>
</body>
</html>

<メモ>
自動再生を行っていない場合は、動画右クリック→再生で再生可能(2015/05/08)
ループも出来るが動画で使うことが少ないため割愛(2015/05/08)
動画の開始が白いと、オート再生が有効になってないとどこで再生させるのか分からない(2015/05/08)

<コピーライト>
画像お借りしました。まずければ削除申請お願いします。
Copyright(C)AKABEi SOFT3. All rights reserved.
    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

基本的には以下のまま使えます。が、一部変更されてるみたいなのでメモ。(2015/04/30)
Google ドライブにWEBページを作成する方法 


 01:作成ボタンをクリックして「フォルダ」
無題



 



 












02:英数字で名前を決める
無題1












03:作成したフォルダを右クリック

 「共有」→「共有」
 これは、一般公開の設定をする為。

無題2











 





04:「詳細決定」をクリック

 ここがちょっと違う所。
無題3
 












05:「変更」をクリック
無題4






 




















06:「ウェブ上で一般公開」をチェックマーク
無題5





 














07:画像の赤枠の所をクリック
無題6








08:「詳細」の「ホスティング」のURLをクリック
無題7



 

 












 「Index.html」にチェックしていないor存在しない場合はこんな風になる。
無題8

 














-----
 以上の順にやると以下のページのようなものが出来る。
BigDreamGames WEBSITE
無題9 


 














 以上です。何か参考になればいいな!!!!! 
    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

HTMLコードでのコメントのやりかた

HTML上のコメント
<!--ここがコメントになります-->


CSS上のコメント
/*
ここの間が
全てコメントになります。
*/
僕はプログラムで最も重要なのはコメントだと思っています。
なぜなら、今の理解している自分ではなく、未来の過去を忘れてしまった自分へのメッセージを残すことが出来るからです。
本当に優秀なプログラマーは適切なコメントを未来に残しているので、プログラマーを目指す方はまずはなんでもいいので詳しくコメントを書くようにしましょう。
適切なコメントかどうかは、自分の腕の上達とともに分かってくるのですから。


 
    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

このページのトップヘ