HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
html5のwebStorage(localStorage)でデータを保存する - Web.fla
webStorageとは 主に二つの種類があるみたいですね～。ひとつはlocalStorageともうひとつはsessionStorageです。 sessionStorage : セッションで管理してるのでブラウザを閉じるとデータが消える。 localStorage : ブラウザで永久的に保存できるのでブラウザを閉じても保存されている。 ふたつの違いの細かい話については「ブラウザでストレージ？ Web Storageを使いこなそう」に詳しく書いてあります。 さて、この機能なんですが先ほども説明したようにユーザーが使っているブラウザにデータの保存や追加・削除といったことがJavaScriptで可能となりました。 若干、クッキーにも似ていますが保存できるデータ量も違いますし、localStorageもsessionStorageも基本的には、キー（key）と値（value）をセットとして扱うため
JavaScriptで動画コンテンツを操作してみた！ - Web.fla
html側でボタンを設定 html側では「再生」「一時停止」「再生速度（早）」「再生速度（遅）」「最初から」というボタンと現在再生されている再生位置（秒数）を表示したいと思います。 とりあえずbuttonタグを利用してそれぞれID名を付けました。現在の再生位置に関しては、ichiというIDを付けてます。＊IDは任意です。 Video要素をjavascriptから操作するメソッド とりあえずjavascriptでvideoタグおよび各種ボタンを変数に入れておきます。videoタグは変数vに入れています。 各処理の説明は後術します。とりあえう全部の処理をして説明すると長くなるので今回のサンプルで使用したところだけ書いていきます。 var v=document.getElementById("v"); var p_btn=document.getElementById("playbtn"); v
Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
blueimp/jQuery-File-Upload: File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side
Multiple file upload: Allows to select multiple files at once and upload them simultaneously. Drag & Drop support: Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window. Upload progress bar: Shows a progress bar indicating the upload progress for individual files and for all uploads combined. Cancelable uploads: Individual file uploads c
UIWebViewでvideoタグを使うとき いきなりfull screenにしない方法 - スマートフォンアプリ開発会社のエンジニアブログ
videoタグタップしたらいきなりfull screenになってしもうた ビンゴ中西です。 HTML5のvideoタグをUIWebViewの中から使ってみました。 するとどうでしょう！ タップした瞬間にいきなり全画面表示！ いやいやいや いきなりすぎる！ What's Happening!! ということで、いきなりは全画面にならない方法。 インラインで表示したい full screenの反対それがインライン表示だ！ 厳密に反対の意味になるのかは知らないが、 とりあえずインラインにすればやりたいことが実現される。 ではどうすればよいのか？ リファレンスさんや！ リファレンスさんに書いとったでえええ！ http://developer.apple.com/library/ios/#documentation/uikit/reference/UIWebView_Class/Reference/R
メディアの種類と形式のガイド: 画像、音声、動画コンテンツ - ウェブメディア技術 | MDN
ほぼ最初の頃から、ウェブは何らかの形で視覚メディアのプレゼンテーションに対応してきました。当初、これらの機能は制限されていましたが、さまざまなブラウザーがウェブ上の静止画や動画の画像を含むことに関する問題に対して独自の解決策を見つけたため、有機的に拡張されました。現代のウェブは、メディアのプレゼンテーションや操作をサポートする強力な機能を備えており、さまざまな種類のコンテンツに対応するいくつかのメディア関連 API を備えています。一般的に、ブラウザーが対応するメディア形式は、ブラウザーの作成者に委ねられており、ウェブ開発者の作業を複雑にしています。 このガイドでは、ウェブ上で使用されるメディアを構成する可能性のあるメディアファイルの種類、コーデック、アルゴリズムの概要を説明します。また、これらの様々な組み合わせに対するブラウザーの対応情報や、ファイル形式の優先順位の提案、特定の種類のコン
HTML5 boilerplateをsassでgulpでstyledoccoな感じにしてみた - Photosynthesic blog
Google web starter kit を触っていて、gulpとstyledoccoという素敵ツールを知ったのでhtml5 boilerplateをベースにsassとgulpを導入してstyledoccoでstyleguideも自動生成する、というのを作ってみました。（・・・Google web starter kitをベースにする方が早い気もするのですが、モジュールやらコンポーネントの内容やSassの構成とかがイマイチ凡人には理解しかねたので今後のアップデートに超期待しています。） といっても、ほぼGoogle web starter kit のgulpfile.jsをぱく・・・参照させていただいております。ディレクトリを変えて、styledoccoのためのソースを加えただけ。 手順 前準備：gulpは公式を参照に予めインストールしているとして。 1. 先ずはHTML5 boile
スマホ用のSingle Page Applicationサイトを作る上での問題点と対応 - Qiita
はじめに スマートフォン向けFX情報サイトSmartFXをBackbone.jsを使ったSPA(Single Page Application)で運用しています。 前回はSinglePageApplicationにおける問題点と対応として全般的なSPAの問題を書きましたが、今回はスマホに特化したスマホサイトをSPAで構築するにあたって気づいた問題点とその対応方法を共有したいと思います。 画面遷移に思いのほか時間がかかる！ SPAで構築しているのに、次の画面の遷移が思っているより遅い感じがします。 サーバにアクセスしていないハズなのに。。 原因 clickイベントの発動にスマホの場合は時間がかかるためです。 スマホの場合はタッチがリンクを押したいのか、それともスクロールしたいだけなのかを判定するために一定時間経過しないとクリックと判定しません。 が、その判定時間がかなり長いものと思われます。
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
androidでHTML5 audio使ったHLS形式のストリーミング再生が上手くいかない - lxyuma BLOG
スマホのブラウザ上で、音声のstreaming配信がしたい。 そこでhtml5 audioでHLS形式のURL(*.m3u8)指定して再生した時に 動かないandroid端末が一部あった。その対応した話。 結論は、単に、audio.type指定すれば良かったというだけの話だけど、 せっかくなので、スマホのストリーミング配信の話から、まとめる。 目次 flashとスマホ hlsとは html5 audio androidで再生できない話 その対応どうしたか？ flashとスマホ ストリーミング配信というと、PCは未だ、flash使う事が多いと思われる。 試しに、amazonの視聴見てみると、やっぱりflash。 スマホでflashは、どうかというと、 iphoneでflashは入らない。 iOS8でflash対応という記事が少し前にあったが、日付の通り、エイプリルフールのネタなので、注意。
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
HTML5 タグによる動画の再生、現在の再生時間や終了のタイミングの取得方法等 | Stronghold Archive
MP4からwebm/ogvへの変換、webm/ogvからMP4への変換は比較的簡単にできます。変換方法はコチラ 動画の現在の再生時間/終了時間/終了のタイミングの取得 これは以下のタグで実現できます。 <ul id="DETE"> <li id="end">再生中</li> <li id="now"></li> <li id="all"></li> </ul> <video id="video" class="vd" autoplay poster="video/thumb.jpg"> <source src="video/001.m4v"> <source src="video/001.webm"> <p><img src="video/thumb.jpg"></p> </video> function init(){ mVideo = document.getElementById("
MediaElement.js - HTML5 video and audio unification framework
MediaElement.js Plugins Boost your player with Chromecast, Google Analytics and more Look good. Sound good. MediaElement.js is a blazingly fast and amazingly powerful HTML5 audio and video library that creates a unified feel for media files (MP4, MP3), streaming content (HLS, M(PEG)-DASH), and embeddable players like YouTube, Vimeo, Twitch, DailyMotion, Facebook, and SoundCloud.
The web's scaffolding tool for modern webapps | Yeoman
Get started and then find a generator for your webapp. Generators are available for Angular, Backbone, React, Polymer and over 5600+ other projects. One-line install using npm: npm install -g yo What's Yeoman?Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A generator is basically a plugin tha
CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう
コントローラUIの設計 <video>要素を使用した場合、表示されるコントローラはWebブラウザによって異なる。 Webブラウザ別のネイティブなビデオコントローラ - Figure 1: Native browser video controls across different browsersより引用 再生、一時停止、シークなどあらゆる機能/ボタンはMedia elements APIをとおして、JavaScriptでアクセス/操作することが可能だ。これらのコントローラUIは、HTML/CSS/SVGなどで自由に組みたてられる。 コントローラのマークアップ まず最初にこれらコントローラをマークアップする必要がある。さきほどのWebブラウザ別ネイティブビデオコントローラを見て分かるとおり、プレーヤには次の機能が求められる。 再生/一時停止ボタン シークバー タイマー ボリューム調節ボタン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
セレクタ｜CSS HappyLife ZERO
http://cdn.liginc.co.jp/demo/2014/04/videodemo/
Online Mockup, Wireframe & UI Prototyping Tool
