menu
menu

Flashでフルスクリーン表示 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+2
  • Pocket0
  • Twitter0

Flashでフルスクリーン表示

  • Labs

JavaScript

こんにちは(・∀・)

 JavaScriptを使用したサンプルをご紹介します。今回はswfファイルをフルスクリーン表示するサンプルです。

サンプルデモ

 サンプルデモはこちら!


HTML

 <body>内に<script>swf();</script>を記述。その際JavaScriptを無効にしていても代替内容が表示されるようにしておくため、<noscript>要素に代替内容を入力します。


<div class="flashcontent">
<script>swf();</script>
<noscript>
<p>当サイトをご覧いただくためには最新版のAdobe Flash Playerのプラグインが必要です。<br>
プラグインをお持ちでない方はこちらからダウンロードしてください。<a href="http://www.adobe.com/go/getflashplayer">adobe.com</a><br>
また、当サイトではJavaScriptおよびスタイルシートを使用しています。<br>
ご覧になる際には、ブラウザ設定でJavaScriptおよびスタイルシートを有効にしてください。</p>
</noscript>
</div>
CSS

 CSSコード内でhtml、bodyのmargin、paddingの値を0にし、overflow: hidden;を指定。それとあわせてhtml、bodyとflashcontentの幅と高さを100%にする。


html {
	overflow-x: hidden;
	overflow-y: hidden;
}
.flashcontent {
	width: 100%;
	height: 100%;
}
JavaScript

 次のJavaScriptを外部ファイル化して<head>内に読み込みます。JavaScriptコード内のファイル名やパス等は必要に応じて変更してください。


function swf(){
	document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">');
	document.write('<param name="movie" value="base.swf">');
		document.write('<param name="allowScriptAccess" value="sameDomain">');
		document.write('<param name="loop" value="true">');
		document.write('<param name="quality" value="best">');
		document.write('<param name="menu" value="false">');
		document.write('<param name="scale" value="noScale">');
		document.write('<param name="salign" value="TL">');
		document.write('<param name="allowFullScreen" value="true">');
		document.write('<param name="bgcolor" value="#fff">');
	document.write('<param name="FlashVars" value="value">');
	document.write('<!--[if !IE]>-->');
	document.write('<object type="application/x-shockwave-flash" data="base.swf" width="100%" height="100%">');
	document.write('<!--<![endif]-->');
	document.write('<param name="FlashVars" value="value">');
		document.write('<param name="allowScriptAccess" value="sameDomain">');
		document.write('<param name="loop" value="true">');
		document.write('<param name="quality" value="best">');
		document.write('<param name="menu" value="false">');
		document.write('<param name="scale" value="noScale">');
		document.write('<param name="salign" value="TL">');
		document.write('<param name="allowFullScreen" value="true">');
		document.write('<param name="bgcolor" value="#fff">');
	document.write('<!--[if !IE]>-->');
	document.write('</object>');
	document.write('<!--<![endif]-->');
	document.write('</object>');
}

関連リンク

 フラッシュ表示スクリプト

  • カテゴリー:Labs
  • facebook4
  • はてなブックマーク3
  • Google+2
  • Pocket0
  • Twitter0