HTML5 & JavaScript でビデオプレーヤーをサクッと作ろう！
どうも、こんにちは。江嵜です！ 今日は HTML5 と JavaScript でビデオプレーヤーを作ってみましょう！ 「Web でビデオプレーヤーなんて作ろうと思ったら、結構めんどくさいんじゃないの？」とお思いのアナタ！ HTML5 からは全然そんなことないんです！ほんの数十分でビデオプレーヤーを作れてしまいますよ。 案ずるより産むが…で、とりあえずコード書いてみましょう！ 今回作るもの 今回、こんな感じのものを作ってみましょう。 操作はシンプルに、動画を操作するための Start・Stop・Pause。 あとはフルスクリーン表示と、動画読み込み用のボタンを配置しました。 それと動画の下にあるプログレスバーですね。 こちらも操作可能ですよ。 コーディング！ 今回は HTML, JavaScript, そしてデザインの為の CSS が必要ですね。 あと、動画選択前に表示しておく画像が 1 枚
YouTube Player APIを使う時のtips集 ｜ Tips Note by TAM
以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement
五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第二回 CSSの構造このページの最終更新日：2018年7月29日 ご存知の通り、CSSは独自の文法を持っおり、したがって独自の構造を持っています。今回から、その構造と操作について解説します。 CSSStyleSheetCSSを構成するさまざまな要素はDOMでは全てオブジェクトで表されます。まずは、そのうちCSSStyleSheetという種類のオブジェクトについて解説します。 CSSStyleSheetは、CSSそのもので最も大きなまとまりで、 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> body { background-color: aqua; } div { background-color: white; } p { background-color: yellow; } </
YouTube Player API Reference for iframe Embeds | YouTube IFrame Player API | Google for Developers
YouTube Player API Reference for iframe Embeds コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 IFrame Player API を使用すると、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript を使用してプレーヤーを制御できます。 この API の JavaScript 関数を使うことで、再生する動画の頭出し、動画の再生 / 一時停止 / 停止、プレーヤーの音量の調節、再生中の動画に関する情報の取得といったことができます。プレーヤーの状態の変化など、特定のプレーヤー イベントに応じて実行されるイベント リスナーを追加することもできます。 このガイドでは、IFrame API の使用方法について説明します。API が送信できるさまざまなイベントの種類と、それらのイベントに応答するイベ
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Jquery: change event to input file on IE
I have a form to upload files, and it should fire the submit after the file selection. On FireFox/Chrome it goes well, and submits the form after file selection, but I can't do this on Internet Explorer. Already tried with click/propertychange but nothing happens. Some code I already tried: $("#attach").attr("onChange", "alert('I changed')"); $("#attach").live($.browser.msie? 'propertychange': 'ch
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://366service.com/jp/qa/db24cb0810fe43ded17663e02d61e807
セレクトボックスを選択したらサブミット - Qiita
Loading...
ondragoverイベント - JavaScript（ジャバスクリプト）リファレンス
Open file input dialog and upload onchange possible in IE?