ホームページ > 記事 > ウェブフロントエンド > Li Yanhui HTML5 ビデオデータ共有

Li Yanhui HTML5 ビデオデータ共有

巴扎黑オリジナル: 2017-08-31 11:57:543036ブラウズ

HTML5 を詳しく紹介するビデオチュートリアル「Li Yanhui HTML5 ビデオチュートリアル」をご覧ください。HTML5 は、ハイパーテキストマークアップ言語 (HTML) の 5 番目の主要な変更です。つまり、HTML5 よりも新しいタグが追加されています。オリジナルの標準を実現し、より多くの機能を実現し、より標準化され、モバイルインターネットにより適しています。

ビデオ再生アドレス: http://www.php.cn/course/365.html

このコースの難しさは、HTML5 の新しいコンテンツとキャンバスの使用にあります:

描画が多い効果 Canvas を使用して実装されているため、Canvas をよく学ぶことが HTML5 をうまく学ぶための鍵となります。

1. キャンバスの紹介

1.1 キャンバスとは何ですか?

は HTML5 の重要な要素です。オーディオ要素やビデオ要素と同様に、外部プラグインなしで実行できます。

Canvas の中国語訳は「キャンバス」であり、強力なグラフィックス処理機能 (描画、変換、ピクセル) を提供します。対処する…）。

ただし、canvas 要素自体はグラフィックを描画するのではなく、空のキャンバスと同等であることに注意してください。

開発者がキャンバス上にグラフィックを描画する必要がある場合、JavaScript スクリプトを使用して描画する必要があります。

1.2 Canvas でできることは何ですか?

基本的なグラフィックの描画

テキストの描画

グラフィックの変形と写真の合成

写真やビデオの加工

アニメーションの実現

ミニゲームの制作

1.3 サポートされているブラウザ

ほとんどの最新ブラウザすべてFirefox、safari、chrome、Opera の最新バージョン、IE9 などの Canvas をサポートします

IE8 以下は HTML5 をサポートしませんが、最新バージョンへの更新をユーザーに促すことができます

1.4 Canvas タグの定義の基本的な概念HTML ページの Canvas 要素は、他の通常の要素を定義するのと何ら変わりません。id、style、class、hidden などの共通属性を指定するだけでなく、width 属性や height 属性も設定できます。

なぜこれを具体的に言わなければならないのですか？

2.2章で詳しく説明します。

さらに、Web ページで Canvas 要素を定義した後は、単なる空白のキャンバスになります。キャンバス上に描画したい場合は、次の手順を実行する必要があります。

Canvas 要素に対応する DOM オブジェクトを取得します。これは Canvas オブジェクトである必要があります。

Canvas オブジェクトの getContext() メソッドを呼び出します。これにより、グラフィックスを描画できる CanvasRenderingContext2D オブジェクトが返されます。

CanvasRenderingContext2D オブジェクトのメソッドを呼び出して描画します。

それでは、キャンバスの練習を開始して、キャンバスがどのようにグラフィックを描画できるかを見てみましょう。

2.canvas の動作

2.1 現在のブラウザの Canvas サポートを確認する

一部のブラウザが Canvas をサポートしていないことも上で説明しましたが、この時点ではどうすればよいでしょうか。

現時点では、canvas タグの間にコンテンツを直接書き込むことができます。これの利点は、ブラウザが Canvas をサポートしていない場合でも、次のようにタグの間にコンテンツを表示できることです。

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <style type="text/css">         
  html,body{     
          margin: 0px;   
       }         
    canvas{           
      background: #ccc;     
          }     
    </style> 
 </head> 
 <body> 
  <canvas>
    我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas 
  </canvas>  
 </body>
</html>

特定のコンテンツが作成されたので、それを見てみましょう?

キャンバスの幅と高さを指定していませんが、キャンバスは実際にページに表示されます。

キャンバスのデフォルトスタイルの幅と高さは300px * 150pxであることに注意してください。

特定の幅と高さを設定しなくても、表示することができます。

りー

以上がLi Yanhui HTML5 ビデオデータ共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Geek Academy HTML5 の新機能、基本的なビデオコースウェアのソースコード次の記事：Geek Academy HTML5 の新機能、基本的なビデオコースウェアのソースコード

続きを見る

Li Yanhui HTML5 ビデオ データ共有

関連記事

Li Yanhui HTML5 ビデオデータ共有