8

私はビデオ再生にvideo.jsを使用しています。iframeを使用していない場合、全画面ボタンをクリックすると期待どおりに機能します。ただし、iframeを使用している場合、全画面ボタンは機能しません。どうしてこれなの？

video.jsのホームページはhttp://videojs.com/です。

iframeページのコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
  <iframe src="sco01-m.htm" id="cw" name="cw" width="100%" height="1000px;"        scrolling="no" frameborder="0"></iframe>
</body>
</html>

sco01-m.htmページのコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/c/video.js"></script>
<body>
  <div align="center">
    <video id="my_video_1" class="video-js vjs-default-skin" controls
      preload="auto" width="800" height="600" poster="1.jpg"
      data-setup="{}">
      <source src="A-2-4.mp4" type='video/mp4'>
      <source src="oceans-clip.webm" type='video/webm'>
    </video>
  </div>
</body>
</html>

sco01-m.htmページではフルスクリーンボタンを使用できますが、iframeページでは使用できません。

4

3 に答える 3

21

W3 仕様 によると、「HTML iframe 要素の属性を介して具体的に許可された埋め込みコンテンツのみallowfullscreenが全画面表示できます。これにより、信頼されていないコンテンツが全画面表示されるのを防ぎます。」

webkitallowfullscreenフルスクリーンに対するブラウザーのサポートはまだ実験段階ですが、Webkit および Mozilla 固有の属性とを使用する必要がありますmozallowfullscreen。

<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

フルスクリーン API をサポートしていないブラウザー (例: Internet Explorer 10以前) では、フルスクリーンは機能しません。これらのブラウザーで全画面表示に近づけるために、video.js プレーヤーは拡張されてブラウザー ウィンドウ全体に表示されます。ただし、プレーヤーが iframe にある場合、iframe より大きくすることはできません。

ネストされた iframe が複数ある場合は、すべての親 iframe にもこれらの属性が必要です。

于 2013-01-04T08:36:32.807 に答える
0

http://standupcomedy.me/tutorials/increaseplayersize Iframe を使用すると、ビデオを 640x315 などのブラウザ内の固定範囲に配置できます。一部のブラウザでは、何が起こっても境界は 640x360 のままです。1 つのビデオに対して 2 つの HTML ページを作成する忍耐力があれば、すべてのブラウザでこれを回避する方法があります。完全に複製された html ページを作成し、sco01-mlargeplayer.html という名前を付けます。大きなプレーヤー ページで、幅と高さの周囲を大きくして vid を設定します。/video タグの後の元のページ プレーヤー コードの下に、「Increase Player Size」などの新しいページを開く外部リンク ボタンを実装します。埋め込まれたビデオ ページを表示しても構わない場合は、target="_parent" 属性を使用して同じウィンドウで新しいページを開きます。新しいページを開きたい場合は、ページのさらに下にある「Google Chrome タブのメモ」をお読みください。

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<body>
<div align="center">
<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="800" height="600" poster="1.jpg"
  data-setup="{}">
  <source src="A-2-4.mp4" type='video/mp4'>
  <source src="oceans-clip.webm" type='video/webm'>
</video>
<a href="http://standupcomedy.me/woggie/demoplayer"target="_parent">Increase PlayerSize</a> 
</div>
</body>
</html>

新しいページで開きたい場合、Google Chrome ブラウザは扱いにくいです。 http://code.google.com/p/chromium/issues/detail?id=106780 -「Google Chrome タブ」の問題で、新しいタブで重複した動画が再生されない.- 2 つの Google Chrome で同じ動画を再生するには新しいタブで 2 ページ目が開いたときのタブ: 2 ページ目 sco01-mlargeplayer.html のソース ビデオの順序を変更します。このようにして、Chrome は動画を新しい動画として認識します。

Embedded player video source:
<source src="A-2-4.mp4" type='video/mp4'>
<source src="oceans-clip.webm" type='video/webm'>

New page video source
<source src="oceans-clip.webm" type='video/webm'>
<source src="A-2-4.mp4" type='video/mp4'>

私は、すべての html5 プレーヤで使用するプレーヤ コントロール システムに取り組んでいます。キックのためだけに、私のサイトにビデオをアップするためです。ここにデモを埋め込むことができます。このデモは、作業中に更新されます。私はそれを Woggie Player と呼んでいます。 .

 <iframe width="610" height="420" src="http://standupcomedy.me/woggie/movie" frameborder="0" allowfullscreen="true"  mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
于 2013-01-04T22:13:29.450 に答える