＊動画は NHKクリエイティブ・ライブラリー素材サイトからダウンロードして使用しています。
＊音声ファイルは「音の素材集 - ©OVER RISE」のCD-ROMから使用しています。＊この音声の著作権は、OVER RISEにあります。

mediagroup属性で、<video>を同期させる

mediagroup属性で、同じ値にすれば同じグループとなり同期されます。
＊「mediagroup.js」を併用。Firefox, Safari, Opera は「mediagroup.js」で反応するようになりました。
＊Chromeは「mediagroup.js」無しでもOK。（2014年1月）

<!--まず<head>に「mediagroup.js」を読み込んでおく-->
<script src="js/mediagroup.js"></script>
<!--↓以下 body内。mediagroupの値を同じにすればグループ-->
<video width="320" height="180" preload="auto" controls mediagroup="videogroup">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
</video>
<video width="320" height="180" preload="auto" mediagroup="videogroup">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
</video>

CSSを使って、ビデオ in ビデオにしてみる

HTMLは上とほぼ同じです。
CSSを使って、サブの<video>要素をメインの中に小さく表示させています。

<!--↓最初の<video>にclass名を付けています-->
<video class="controller" preload="auto" controls mediagroup="pip2" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
</video>
<video preload="auto" mediagroup="pip2">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
</video>

CSSはこちら↓

.controller + video {
    /*↑controllerというクラス名の要素に隣接した（直後の）<video>要素という意味のセレクタ*/
    /*↓video.controller に対しての位置と、サイズやborderを指定します*/
   position: relative;
   width: 213px;
   height: 120px;
   left: 400px;
   top: -340px;
   border: 1px solid #666;
}

MEMO：
上記のCSSは「mediagroup.js」サイトの方法をそのまま使いました。
でも、このCSSだと、メインの<video>要素の真下に、サブの<video>のサイズ分だけ隙間が空いてしまいます。
なので、2つの<video>要素を囲む<div>を親として、この親要素に対しての position: absolute にしたほうが、隙間も無く、扱いやすいと思います。
その場合のCSSのソースはこちらです。

/*↓2つの<video>を囲む<div>にID名（ここでは video_unit）を付けて指定します。*/
div#video_unit {
	position:relative;
	padding:0;
}
/*↓2番目の<video>への指定。親の<div#video_unit>に対して position: absolute で絶対位置を指定しています。*/
.controller + video {
	position: absolute;
	width: 213px;
	height: 120px;
	left: 401px;
	top: 25px;
	border: 1px solid #666;
}

mediagroup属性で、<audio>を同期させる

<audio>要素も、同じく mediagroup属性で同期させられます。
これは ChromeのみOK（2014年1月）。<audio>に「mediagroup.js」は無関係。
＊Firefox、Safari、Operaは反応しませんでした。

このサンプルでは、違う2つの曲を同期させてみました。

<audio controls preload="auto" mediagroup="audiogroup">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
</audio>
<audio controls preload="auto" mediagroup="audiogroup">
  <source src="audio/sample2.mp3" type="audio/mp3">
  <source src="audio/sample2.wav" type="audio/wav">
</audio>

ちなみに合わせた曲は、1番目がコレ。

2番目はコレ。

mediagroup属性で、<video>と<audio>を同期させる

<video>要素と<audio>要素を mediagroup属性で同期させてみました。
これも ChromeのみOK（2014年1月）。「mediagroup.js」は無関係。
＊Firefox、Safari、Operaは反応しませんでした。

<video controls preload="auto" mediagroup="vagroup" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
<audio controls preload="auto" mediagroup="vagroup">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
</audio>