Video コンポーネント — sgcHTML

概要

TsgcHTMLComponent_Video

<video> または <audio> 要素を出力する HTML5 メディアプレーヤーです。ソースと再生オプションを設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Video

レンダリング内容

HTML5 の <video> / <audio> メディア

ファミリー

コンテンツ & レイアウト

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、ソースを設定し、レンダリングする

Src と MediaType を割り当て、Controls、Autoplay、Responsive を切り替えてから、HTML を読み取ります — または、静的な Build および BuildYouTube ヘルパーを使用します。

uses
  sgcHTML_Component_Video;

var
  oVid: TsgcHTMLComponent_Video;
begin
  oVid := TsgcHTMLComponent_Video.Create(nil);
  try
    oVid.Src := '/media/intro.mp4';
    oVid.MediaType := mtVideo;
    oVid.Controls := True;
    oVid.Poster := '/media/intro.jpg';
    oVid.Responsive := True;

    WebModule.Response := oVid.HTML;   // <video> element
  finally
    oVid.Free;
  end;
end;

// Or in a single line with the static helpers:
Result := TsgcHTMLComponent_Video.Build('/media/intro.mp4', mtVideo, True);
Result := TsgcHTMLComponent_Video.BuildYouTube('dQw4w9WgXcQ', '100%', '400');

// includes: sgcHTML_Component_Video.hpp

TsgcHTMLComponent_Video *oVid = new TsgcHTMLComponent_Video(NULL);
try
{
  oVid->Src = "/media/intro.mp4";
  oVid->MediaType = mtVideo;
  oVid->Controls = true;
  oVid->Poster = "/media/intro.jpg";
  oVid->Responsive = true;

  String html = oVid->HTML;   // <video> element
}
__finally
{
  delete oVid;
}

// Or in a single line with the static helpers:
String html = TsgcHTMLComponent_Video::Build("/media/intro.mp4", mtVideo, true);
String yt = TsgcHTMLComponent_Video::BuildYouTube("dQw4w9WgXcQ", "100%", "400");

using esegece.sgcWebSockets;

var video = new TsgcHTMLComponent_Video();
video.Src = "/media/intro.mp4";
video.MediaType = TsgcHTMLMediaType.mtVideo;
video.Controls = true;
video.Poster = "/media/intro.jpg";
video.Responsive = true;

string html = video.HTML;   // <video> element

// Or in a single line with the static helpers:
string oneLine = TsgcHTMLComponent_Video.Build("/media/intro.mp4",
    TsgcHTMLMediaType.mtVideo, true);
string yt = TsgcHTMLComponent_Video.BuildYouTube("dQw4w9WgXcQ", "100%", "400");

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Source

Src はメディアの URL を設定し、MediaType（TsgcHTMLMediaType: mtVideo、mtAudio）はレンダリングする要素を選択します。

Playback

Controls、Autoplay、Loop、Muted は、HTML5 のメディア属性に直接マッピングされます。

Sizing

Width と Height はプレーヤーの寸法を設定します。Responsive は、ビデオを 16:9 のレスポンシブ比率のコンテナで包みます。

Poster

Poster は、ビデオが再生される前にプレースホルダーのフレームを表示します。VideoID は DOM の id を設定します。

YouTube

BuildYouTube(aVideoID, aWidth, aHeight) は、レスポンシブな YouTube の iframe 埋め込みを 1 回の静的呼び出しで返します。

One-line build

Build(aSrc, aMediaType, aControls) は、プレーヤーの HTML を 1 回の静的呼び出しで返します。HTML は、設定済みのインスタンスをレンダリングします。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

Video