-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (106 loc) · 4.86 KB
/
index.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "9ab1hmjo4e");
</script>
</head>
<body>
<h2>Video with src</h2>
<video id="v1" controls src="rabbit320Src.mp4"></video>
<button onclick="remove('v1')">remove</button>
<button onclick="swap()">swap</button>
<h2>Video without src attribute but with source element</h2>
<video id="v2" controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
<button onclick="remove('v2')">remove</button>
<h2>Dynamic</h2>
<div id="target"></div>
<div style="margin-top: 15px; display: flex; flex-direction: column; gap: 20px;">
<div>
<button id="addVideo" onclick="addVideo()">Add video element</button>
<button id="addSourceElement" onclick="addSourceElement()" disabled>Add source element</button>
<button id="addSrcAttribute" onclick="addSrcAttribute()" disabled>Add src attribute</button>
<button id="remove" onclick="removeAddVideo()" disabled>Remove</button>
</div>
<div>
<button id="addVideoWithSrcAttribute" onclick="addVideoWithSrcAttribute()">Add video element with src attribute</button>
<button id="removeVideoWithSrcAttribute" onclick="removeVideoWithSrcAttribute()" disabled>Remove</button>
</div>
<div>
<button id="addVideoWithSourceElement" onclick="addVideoWithSourceElement()">Add video element with source element</button>
<button id="removeVideoWithSourceElement" onclick="removeVideoWithSourceElement()" disabled>Remove</button>
</div>
</div>
<script>
const addVideo = () => {
document.getElementById('addVideo').disabled = true;
const video = document.createElement('video');
video.id = 'dynamicVideo'
video.controls = true;
document.getElementById('target').appendChild(video);
document.getElementById('addSourceElement').disabled = false;
document.getElementById('addSrcAttribute').disabled = false;
document.getElementById('remove').disabled = false;
}
const removeAddVideo = () => {
document.getElementById('addVideo').disabled = false;
remove('dynamicVideo');
document.getElementById('addSourceElement').disabled = true;
document.getElementById('addSrcAttribute').disabled = true;
document.getElementById('remove').disabled = true;
}
const addSourceElement = () => {
document.getElementById('addSourceElement').disabled = true;
const source = document.createElement('source');
source.src = "rabbit320DynSource.mp4";
source.type = "video/mp4";
document.getElementById('dynamicVideo').appendChild(source);
}
const addSrcAttribute = () => {
document.getElementById('addSrcAttribute').disabled = true;
document.getElementById('dynamicVideo').src = "rabbit320DynSrc.mp4";
}
const addVideoWithSrcAttribute = () => {
document.getElementById('addVideoWithSrcAttribute').disabled = true;
const video = document.createElement('video');
video.id = 'dynamicVideoAddVideoWithSrcAttribute'
video.controls = true;
video.src = 'rabbit320DynAddDirectSrc.mp4';
document.getElementById('target').appendChild(video);
document.getElementById('removeVideoWithSrcAttribute').disabled = false;
}
const removeVideoWithSrcAttribute = () => {
document.getElementById('addVideoWithSrcAttribute').disabled = false;
remove('dynamicVideoAddVideoWithSrcAttribute');
document.getElementById('removeVideoWithSrcAttribute').disabled = true;
}
const addVideoWithSourceElement = () => {
document.getElementById('addVideoWithSourceElement').disabled = true;
const video = document.createElement('video');
video.id = 'dynamicVideoAddVideoWithSourceElement'
video.controls = true;
const source = document.createElement('source');
source.src = "rabbit320DynAddDirectSource.mp4";
source.type = "video/mp4";
video.appendChild(source);
document.getElementById('target').appendChild(video);
document.getElementById('removeVideoWithSourceElement').disabled = false;
}
const removeVideoWithSourceElement = () => {
document.getElementById('addVideoWithSourceElement').disabled = false;
remove('dynamicVideoAddVideoWithSourceElement');
document.getElementById('removeVideoWithSourceElement').disabled = true;
}
const remove = (id) => document.getElementById(id).remove();
const swap = () => document.getElementById('v1').src = document.getElementById('v1').src.endsWith('rabbit320Src.mp4') ? 'rabbit320SrcSwap.mp4' : 'rabbit320Src.mp4';
</script>
</body>
</html>