1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
content / test / data / media / picture_in_picture / two-videos.html [blame]
<!DOCTYPE html>
<html>
<body>
<video src="../tulip2.webm"></video>
<video src="../tulip2.webm"></video>
<iframe src="data:text/html,<video src='../tulip2.webm'></video>"></iframe>
</body>
<script>
const videos = document.querySelectorAll('video');
videos[0].addEventListener('playing', e => {
document.title = 'videos[0] playing';
});
videos[0].addEventListener('enterpictureinpicture', e => {
document.title = 'videos[0] entered picture-in-picture';
});
videos[1].addEventListener('playing', e => {
document.title = 'videos[1] playing';
});
videos[1].addEventListener('enterpictureinpicture', e => {
document.title = 'videos[1] entered picture-in-picture';
});
let iframeVideos = [];
if (window.top == window.self) {
const iframe = document.createElement('iframe');
iframe.src = 'two-videos.html';
document.body.appendChild(iframe);
iframe.addEventListener('load', () => {
document.title = 'iframe loaded';
iframeVideos = iframe.contentDocument.querySelectorAll('video');
iframeVideos[0].addEventListener('playing', e => {
document.title = 'iframeVideos[0] playing';
});
iframeVideos[0].addEventListener('enterpictureinpicture', e => {
document.title = 'iframeVideos[0] entered picture-in-picture';
});
});
}
</script>
</html>