Youtube video embedding harm reduction
Embedding external content on a website in the current enshittocene period is more annoying than ever, so here is a copy-pasteable snippet to embed a youtube video while reducing its tracking and nuisance capabilities as much as possible: <iframe credentialless allowfullscreen referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin" allow="accelerometer 'none'; ambient-light-sensor '
Twitter、アップロード動画の品質を改善したとツイート
今回の改善は、その前処理で、動画を短いデータに分割するステップを省くことだったとTwitterはThe Vergeに説明した。このステップで品質が劣化していた可能性があるという。 未発表新機能ハンターのジェーン・マンチュン・ウォン氏はさっそく動画をアップロードし、「確かに良くなったみたい」とツイートした。 関連記事 Twitter、画像や動画を横幅いっぱいに表示するテスト 「違和感ある」「イラストが見やすい」など賛否 米Twitterが、タイムライン上で画像や動画を画面の横幅いっぱいに表示する仕様変更をiOS版アプリでテストしている。「（コンテンツが）より注目されやすくなる」という。 Twitter、モバイルでの4K画像投稿・表示を正式機能に TwitterがiOSおよびAndroid版アプリからも4K画像を圧縮せずにアップロードできる機能を正式にリリースした。設定により、4Kでの表示も可
Replace animated GIFs with video for faster page loads | Articles | web.dev
Replace animated GIFs with video for faster page loads Stay organized with collections Save and categorize content based on your preferences. Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only to find out that GIF was really a video? There's a good reason for that. Animated GIFs can be downright huge. Thankfully, this is one of those areas of
HTML5 Video
HTML5 Video Events and API This page demonstrates the new HTML5 video element, its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values). See the effect on the video and on the underlying events and properties. load() play() pause() currentTime+=10 currentTime-=10 currentTime=50 playbackR
chromeでvideoのダウンロードリンクを非表示にする
videoのcontrols属性を指定した際にchromeで表示されるダウンロードリンクを非表示にしているサイトを見かけたので、設定方法を調べてみました。 対応ブラウザ ダウンロードリンクの非表示の設定はcontrolslist属性で行うのですが、主要ブラウザで対応しているのはchromeとedge(Chromium版)のみのようです。 対応ブラウザはこちら 設定方法 controlslist属性の使い方についていくつか試してみます。 まずダウンロードリンクを非表示にするには、controlslistの値にnodownloadを設定すればOKです。 <video src="video.mp4" controls controlslist="nodownload"></video> デフォルトでは以下のような表示になっています。 設定後は以下のように非表示にできました。 controlsli
「Chrome 70」のデスクトップ版でピクチャーインピクチャーが可能に - ITmedia NEWS
米GoogleのWebブラウザの最新版「Chrome 70」のWindows、macOS、Linuxで、ピクチャーインピクチャー（PIP）機能が使えるようになった。同社の“Chromeエバンジェリスト”、フランソワ・ビューフォート氏が10月19日（現地時間）、Google+で告知した。 PIPは、再生中の動画などを小さなフローティングウィンドウにして、他の作業中も画面上に表示する機能。Androidでは「Android 8 Oreo」から、一部のアプリで利用可能になっている。 サービス側がPicture-in-Picture Web APIでサポートする必要がある。YouTubeでは既に可能で、Chromeのタブで再生中の動画を2回右クリックすると表示されるメニューで「ピクチャー イン ピクチャー」を選択する。
Mac Safariでvideoの自動再生ができない
Safari 11からvideoタグのautoplayが効かなくなっているようだったので、いくつかデモを作って試してみました。 サンプルコード 確認はMac Safari のバージョン11.1.1 で行っています。 まずはvideoタグの属性にautoplayのみ付けてみます。 HTML <video src="movie.mp4" autoplay></video> 自動再生されませんでした。 autoplayのみのデモページ 次に、autoplayとcontrolsを付けてみます。 HTML <video src="movie.mp4" autoplay controls></video> クリックでは再生されますが、この場合も自動再生されませんでした。 autoplay + controlsのデモページ 次にautoplayとmutedを付けてみます。 HTML <video src
Autoplay policy in Chrome | Blog | Chrome for Developers
Internet memes tagged "autoplay" found on Imgflip and Imgur. New behaviors As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit
「Google Chrome 66」安定版 動画の自動再生がなくなり、62件の脆弱性に対処
米Googleは4月17日（現地時間）、デスクトップ（Windows、Mac、Linux）向けWebブラウザ「Chrome 66」（66.0.3359.117）の安定版を公開した。Android版も向う数週間中にリリースの見込み。 一般ユーザー向けの新機能としては、Chrome 64で追加されるはずだったが見送られた動画の自動再生無効化がようやく実現した。筆者の環境（Windows 10）でCNNなど複数のWebサイトで確認したところ、Chrome 65では自動再生されていたWebページの動画が、クリックするまで再生されないようになった。 開発者向けの説明によると、Chromeでの自動再生のポリシーは、自動再生の無効が基本で、もしユーザーがクリック（タップ）したら再生するというシンプルなものになった。モバイルの場合は、ユーザーが該当するサイトをホーム画面に追加した場合も音声付きで自動再生さ
［速報］Google、動画になにが映っているかを自動的に判断する「Video Intelligence API」発表。Google Cloud Next'17
［速報］Google、動画になにが映っているかを自動的に判断する「Video Intelligence API」発表。Google Cloud Next'17 Googleは米サンフランシスコでイベント「Google Cloud Next'17」を開催。1日目の基調講演で、動画を分析して、いつ、なにが映っているかを判断する「Video Intelligence API」を発表しました。 動画になにが映っているかをコンピュータが自動的に判断する Googleのチーフサイエンティスト Fei-Fei Li博士によると、動画をコンピュータに理解させることはこれまで何年ものあいだ大きな課題で、実際、画像研究者にとって動画はデジタルな世界のダークマター（暗黒物質）だとされてきた、と。 そうしたなかで、Googleは機械学習による新しいAPI「Video Intelligence API」を発表しまし
H.264の秘密 | POSTD
(編注：2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) (2016/12/11、いただきましたフィードバックをもとに翻訳を修正いたしました。) H.264は、動画圧縮コーデックの標準規格です。ネット上の動画、Blu-ray、スマホ、セキュリティカメラ、ドローンなどなど、今やあらゆるところでH.264が使われています。 H.264は注目すべき技術のひとつです。たったひとつの目標、つまりフルモーションビデオの送信に要するネットワーク帯域を削減することを目指した30年以上の努力の結晶なのです。 技術的な面でも、H.264はとても興味深い規格です。この記事では、その一部について概要レベルでの知識を得られることでしょう。あまり複雑だと感じさせないようにするつもりです。今回おはなしする概念の多くは動画圧縮全般にあてはまるものであり、H.264に限ったものではありません
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Motion extraction with mostly CSS
We're Bringing Responsive Video Back! | Scott Jehl, Web Designer/Developer
Optimizing Video for the Web
CSS { In Real Life } | Video: Building a Greener Web
The Web is Good Now | CSS-Tricks
関東大震災映像デジタルアーカイブ
HTML5 Video loadeddata event does not work in IOS Safari
Material Design Motion
