One of my favorite things about HTML5 video is how easy it is to create your own custom controls. This not only allows you to style the controls however you would like but also allows you to add new controls like fast-forward or rewind. This is all done through the use of a JavaScript API. In this post you are going to learn how to build your own custom controls for HTML5 videos. Lets get started!
On my last post I focused on issues that I’ve found a solution, this one is going to be about bugs and issues that I couldn’t find a solution and/or things that are impossible to do on the iPhone and iPad. It is important to note that I didn’t spent too much time searching or trying to find solutions for each problem but I consider most of them to be impossible to solve without a new OS release… S
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
概要 各種PC用ブラウザ、iPhone、iPad、Androidでの動画の表示テストを行うためのページです。 動画はダウンロードしてご自由にお使いいただいて構いません。 トリミング、エンコード、二次利用、再配布など、全てOKです。 ただし、この動画を利用、もしくは利用になれないことにより生じるいかなるトラブルや損害には、当方は一切の責任を負いません。 「このエンコードでもテストしてよ」等ありましたら、ご連絡くださいませ。 ページの先頭へ戻る MIMEタイプの設定 .htaccessに下記を記述を追加しています。 AddType video/mp4 .mp4 AddType video/ogg .ogg .ogv AddType video/webm .webm ページの先頭へ戻る
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
16 Ridiculously Impressive CSS3 & HTML5 Experiments | Free and Useful Online Resources for Designers and Developers これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ 数年前なら誰もがFlashで出来ていると疑わなかったようなデモがHTML5＆CSS3で実現されています。 これだけのことがWEBでできるんだという部分を把握しておく意味でも見ておいたほうがよさそうです これだけ出来ることが増えていくと自由な反面、WEBも開発コスト等があがっていきそうで怖いところがありますね 関連エントリ WebCamで撮影をHTML5で実現するデモ HTML5を使ったクールなサイトデザイン集２１ HTML5のゲームエンジン「Quintus」
ひさしぶりのエントリになります。JavaScript Advent Calendar 2010 の24日担当です。 この Advent Calendar では、12月1日からクリスマスの12月25日まで1日ずつ持ち回りでblogに書くことになっています。お題に"JavaScript"とあるように、blogは、JavaScriptに関するものになります。他の方々も面白いことを色々を書いておられますので、是非読んでみてください。 さて、何やら世間はクリスマスイブで盛り上がっていますが、仕事で缶詰の私には関係ありませんので(もちろん仕事がなくても関係ありませんが…)、今回は、HTML5 の API のひとつである、Web Storage について紹介したいと思います。 割と初心者向けの内容になります。 Web Storage とは Web Storage は、データをブラウザ上に永続的に保持する
総合研究大学院大学 複合科学研究科 情報学専攻 卒 博士（情報学） 自然言語処理や機械学習、データ分析に関する研究内容とwebシステムの開発と運用について書いています。 シリコンバレーベンチャーみたいに深い技術の事業化をしたいと思っています。 ご興味ある方はご連絡ください。 videoタグで動画再生 html5 <audio>タグで音楽を奏でるということをやります。 ただ単に音楽ファイルを再生するのではありません。 <html> <audio src="wavfile.wav" controls>未サポート wav</audio> <audio src="mp3file.mp3" controls>未サポート mp3</audio> </html> これにアクセスして、何が表示されるか確認します。 No html5 audio tag support in WebView android
Bing Mapsの基礎〜応用 某GのmapのAPIを利用するのにクレカ登録が必須となったので、Bing Mapsでどのくらいまでいけるのか試してみた。 主な使用技術 Bing Maps API、JavaScript、CSS、レスポンシブ 詳しく見る Youtube APIを使用したサンプル YouTube Data API (v3)を使用し、JavaScriptにてユーザーチャンネルの動画を取得するプログラムを作成。 主な使用技術 YouTube Data API、JavaScript(jQuery)、CSS、レスポンシブ 詳しく見る ポケモンGO図鑑 Githubに公開されている「Pokemon-DB」を元にページを生成 主な使用技術 JavaScript(jQuery)、CSS、レスポンシブ、Photoshop（タイプのドット絵を作成） 詳しく見る
Flashを使わないiOS、Android向け動画とvideo要素とMediaElement.jsとテスト動画 2012年4月9日 2017年6月28日 HTML+CSS tagawa 動画を扱う案件があって、 「iOSやAndroidで見れるように」という要件だったので、 折角ならPCブラウザも含めてテストしてみるかってことで、 埋め込みや直リンクなどの動画の配信方法と、 PCブラウザ、iOS、Androidの動作テストをした内容を、 自分のメモ用に情報整理し、下記に公開しました。 どなたかのご参考になれば幸いです。 テスト動画と動画の表示テスト 結論は上記サイトにも書いているけど、 H.264エンコーディング、横960px縦540px程度の動画を1つだけ用意する。 動画は直リンクする。 埋め込む場合はMediaElement.jsを利用し、video要素に上記動画を指定する。 な感じが
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
初めまして、河村です。 これからしばらくはスマートフォンのwebアプリに関することを記事にしていこうかなと思っています。 webアプリといっても、単にjavascriptでサーバとajaxでやり取りした結果を出すだけ、というところに留まらず、css3やhtml5を積極的に取り入れていこうと思っていますので乞うご期待。 初回である今回は、スマートフォンやタブレットでhtml5のvideoタグを扱う案件の中から、ポイントだけを抜き出してお話したいと思います。 今回扱うプラットフォームはiOS4.2以上のiPhone（Androidデバイスは持ち前がないので検証はまたの機会に）、確認のためのPC版safari5。 まずやりたいこととしては、 「ページがロードされたらvideoで指定されているmovieを自動的に再生したい」 というのがあります。 しかしこれがまた単純に自動再生できない。例えば以下
iPadで、再生と同時にフルスクリーンモードにしたい。でもできないかも。 videoにwebkitEnterFullscreenっていうメソッドがあるんだけど、何かのボタンを押したときに、再生とフルスクリーンを同時にできないっぽい。 フルスクリーン化できるのはvideoのloadedmetadataイベントが発火した後 iPadは再生がはじまらないとloadedmetadataイベントが発火しない webkitEnterFullscreenメソッドはclickイベントなどのユーザー任意のアクション以外で実行できない（たぶん） 1、2の理由から video.addEventListener(‘loadedmetadata’, function() { video.webkitEnterFullscreen() }); $(‘.btn’).click(function() { video.pl
ブラウザのhtml5対応は日進月歩なので今のところ（iOS5.0）の挙動ということで。 Autoplay html5で使えるようになった NSString *httpString = @"<video id='video' width='500' height='300' src='http://hoge.com/hoge.mp4' controls></video>"; [webView loadHTMLString:httpString baseURL:nil];controls属性を追加しておけば再生ボタンなんかもブラウザが勝手に用意してくれます。 便利。 ただ、どうしても（クライアントの無茶な要望などで）自動再生させたい時があります。 たとえそれが悪いことだと分かっていても。 Autoplay is bad for all users | Punkchip そうは言ってもクライアン
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
