タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

HTML5 videoに関するweb-gyunyuのブックマーク (7)

  • jQuery Content Slider | Responsive jQuery Slider | bxSlider

    $('.bxslider').bxSlider({ video: true, useCSS: false }); <!-- <script src="/js/plugins/jquery.fitvids.js"></script> must be included in the <head> after the jQuery library, and before the jquery.bxslider.js file. See the source code of this page for an example. --> <ul class="bxslider"> <li> <iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFu

  • video要素、audio要素をJavaScriptから操作する-HTML5のAPI、および、関連仕様

    ※このページでは、video要素、audio要素をJavaScriptから操作する方法について紹介しています。 単純に<video>タグや<audio>タグの使い方を知りたい方は、 以下のページなどをご確認ください。 <video>タグで動画を埋め込む <video> …… 動画を再生する <audio> …… 音声を再生する ■video要素、audio要素をJavaScriptから操作 HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。 これらのメソッド・プロパティ・イベントを使用することで、 JavaScriptから動画・音声などのメディアリソースの状態を参照したり、 読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。 <video>タグのcontrols属性を指定すると、

  • HTML5サンプル集 | 株式会社あゆた

    会社ブログ「あゆたジャーナル」始めました。 [新着情報]あゆたジャーナルにてHTML5の開発ツール「Adobe Edge Animate」の入門記事を掲載しました。 このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。このサンプルの多くは、2010年度まで弊社技術顧問を担当していただいた白石氏がマイコミジャー ナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。どれも非常にシンプルなものではありますが、HTML5の各 機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプ

  • 『video要素』超基本を知る!! | HTML5でサイトをつくろう

    video要素について 今回はHTML5新要素の中でも注目度が高い「video要素」の基的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。 video要素の再生とブラウザ表示 video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンな

    『video要素』超基本を知る!! | HTML5でサイトをつくろう
  • FirefoxのHTML5『video』タグの落とし穴? | f:factory

    イラスト・写真の制作工場『F:FACTORY』。備忘録 今更ながらHTML5のvideoタグなんですが、 ここで躓いてしまったので、忘れないようにメモ。 Google先生に HTML5 VIDEO で検索すると、埋め込みの際の注意事項的なものがすぐ見つかると思います。 それを参考にするといいでしょう…ごめんなさい… 簡単に説明するとHTML5ではプラグインを使わなくても動画をWEBに表示するとこができます。 再生ボタンや停止ボタンなどのインターフェースも表示したりできる優れものなんですよね。 ※HTML5対応のブラウザでのみ可能です。 ソースにこれを書くだけでいいんです…が….mp4が対応されていないブラウザももちろんあるので ※ご利用のブラウザでは再生することができません。 と、それぞれのブラウザに対応した動画形式を準備してsource要素に振り分けます。 これだけでブラウザが対応してい

  • HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com

    ※模索して行った物なのでミスリードの可能性がありますのでご注意下さい。 なかなか動かなくてハマリました・・・動画やっぱこわい。。 タグ自体はシンプルなんですが、ブラウザ対応の動画形式が違うんですね。 何が面倒って、その動画形式や対応状況などを加味して用意するのが面倒でした。 用意する動画は mp4 : Chrome・Safari・IE9 ogv : Firefox・Opera webm : Chrome・Opera という具合。 更に、もちろんHTML5をサポートしていないブラウザも有り。 動画の変換ですが、僕はこのツールを使いました。 XMedia Recorde http://www.forest.impress.co.jp/lib/pic/video/vdoenc/xmediarecode.html (窓の社) 読み込んで形式を選択してエンコードボタンをクリ

  • todya-only.net

    Bing Mapsの基礎〜応用 某GのmapAPIを利用するのにクレカ登録が必須となったので、Bing Mapsでどのくらいまでいけるのか試してみた。 主な使用技術 Bing Maps APIJavaScriptCSS、レスポンシブ 詳しく見る Youtube APIを使用したサンプル YouTube Data API (v3)を使用し、JavaScriptにてユーザーチャンネルの動画を取得するプログラムを作成。 主な使用技術 YouTube Data APIJavaScript(jQuery)、CSS、レスポンシブ 詳しく見る ポケモンGO図鑑 Githubに公開されている「Pokemon-DB」を元にページを生成 主な使用技術 JavaScript(jQuery)、CSS、レスポンシブ、Photoshop(タイプのドット絵を作成) 詳しく見る

  • 1