忍者ブログ
音楽制作、Webデザイン(HTML,CSS,JavaScript)、プログラミング(Java,C,PHP)、日常の話題を集める「情報ターミナル」
ブログ内検索
アンケート実施中です
Creative Commons
クリエイティブ・コモンズ・ライセンス
当ブログのすべての コンテンツは クリエイティブ・コモンズ 表示 - 非営利 - 継承 2.1 日本 ライセンスの下に利用可能です。 他サイトからの引用につきましては、引用元サイトの権利に準拠します。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

この記事は役に立ちましたか?あなたの1クリックに励まされます!              


HTML5を使ってビデオプレイヤーを自分のページに実装。Youtubeなどのサービスを介さずに公開できます。


Step1. MediaElement.jsをダウンロードするよ

まずは、jsファイルをダウンロードしてくるよ。ダウンロードしたら、その中から
  • flashmediaelement.swf
  • mediaelement-and-player.min.js
  • silverlightmediaelement.xap
を取り出して、jsというフォルダを作ってそこに入れておこう。



Step2. HTMLファイルを記述するよ


 
<head>
<title>Video Player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
 

head内に、scriptタグでgoogleにホストされているjQueryライブラリを呼び出しているよ。
あと、linkタグでCSSの呼び出しを記述してるね。

それからbody内、ビデオを表示したい箇所に下の記述。

<video width="640" height="267" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
</video>
 
src="   "に、埋め込みたいビデオのファイル名を記述、typeでビデオの種類を指定している。
videoタグのposter=" "は、静止画を指定しよう。

スクリプトを呼び出すよ。さっきダウンロードしたMediaElementに含まれる機能をここで実装させている。

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('video').mediaelementplayer({
alwaysShowControls: true,
videoVolume: 'horizontal',
features: ['playpause','progress','volume','fullscreen']
});
});
// ]]></script>
 


Step3. ビデオの基本的なスタイルを整えるよ

まず、デフォルトの余計な余白などのスタイルをリセットしておく。

.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
margin: 0;
padding: 0;
border: none;
outline: none;
}
 

そしたら、ビデオの入るところのスタイルを整えていくよ。

.mejs-container {
position: relative;
background: #000000;
}
 
.mejs-inner {
position: relative;
width: inherit;
height: inherit;
}
 
.me-plugin { position: absolute; }
 
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
width: 100%;
height: 100%;
}
 
.mejs-embed,
.mejs-embed body {
margin: 0;
padding: 0;
overflow: hidden;
}
 
.mejs-container-fullscreen {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1000;
}
 
.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
position: absolute;
top: 0;
left: 0;
}
 
.mejs-poster img { display: block; }
 



Step4. コントロール部品が入る箇所をデザインするよ

次に、コントロール部分が入るコンテナをデザイン。

.mejs-overlay-play { cursor: pointer; }
 
.mejs-inner .mejs-overlay-button {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(../img/play.png) no-repeat;
}



.mejs-container .mejs-controls {
position: absolute;
width: 100%;
height: 34px;
left: 0;
bottom: 0;
background: rgb(0,0,0);
background: rgba(0,0,0, .7);
}
 
.mejs-controls .mejs-button button {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
background: transparent url(../img/controls.png);
}
 




Step5. コントロールボタンのデザインをするよ



.mejs-controls div.mejs-playpause-button {
position: absolute;
top: 12px;
left: 15px;
}
 
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 12px;
height: 12px;
background-position: 0 0;
}
 
.mejs-controls .mejs-pause button { background-position: 0 -12px; }
 
.mejs-controls div.mejs-volume-button {
position: absolute;
top: 12px;
left: 45px;
}
 
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
background-position: -12px 0;
}
 
.mejs-controls .mejs-unmute button { background-position: -12px -12px; }
 
.mejs-controls div.mejs-fullscreen-button {
position: absolute;
top: 7px;
right: 7px;
}
 
.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
width: 27px;
height: 22px;
background-position: -26px 0;
}
 
.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }
 





Step6. ボリュームのスライダーを作るよ



.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
cursor: pointer;
top: 15px;
left: 65px;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 60px;
background: #d6d6d6;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
top: 0;
left: 0;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
height: 4px;
 
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
 





Step7. プログレスバーを作るよ



.mejs-controls div.mejs-time-rail {
position: absolute;
width: 100%;
left: 0;
top: -10px;
}
 
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
cursor: pointer;
width: 100%;
height: 10px;
top: 0;
left: 0;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total {
background: rgb(152,152,152);
background: rgba(152,152,152, .5);
}
 
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: rgb(0,0,0);
background: rgba(0,0,0, .3);
}
 
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }
 





Step8. プログレスバーにハンドルを付けて、時間をポップアップさせるよ



.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
cursor: pointer;
width: 16px;
height: 18px;
top: -3px;
background: url(../img/handle.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
background: url(../img/tooltip.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
position: absolute;
display: block;
left: 0;
top: 4px;
 
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }
 





Step9. コントロール部の左側を緑色にしてグラデーションをつけるよ



.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #82d344;
background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
background: linear-gradient(top, #82d344 0%, #51af34 100%);
}
 






元記事:How to Create an Video Player in jQuery, HTML5 & CSS3 [Tutorial] (by designmode)


PR

この記事は役に立ちましたか?あなたの1クリックに励まされます!              

この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
[43]  [42]  [41]  [40]  [39]  [37]  [36]  [35]  [34]  [33]  [30
  • :
  • :


お役に立てました?
よろしければ応援の1clickをお願いします(*^^*)




blogramのブログランキング

にほんブログ村 デザインブログ Webデザインへ


ブログランキング・にほんブログ村へ
順位はこちら。
いつもありがとうございます。
忍者AdMax

ローテックな最先端 Produced by たんたん      Designed by ninja-blog.com
忍者ブログ [PR]
Related Posts Plugin for WordPress, Blogger...