<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>Play in Safari</title>
<style>
html,body {background-color:#000; color:#ccc;}
input[type="file"] {display:none;}
.next {display:block; background-color:none; width:100vw; text-align:center; padding:39vh 0px; font-size:128px;}
</style>
<body>
<label class="next" id="videoload"><input id="video" type="file" accept="video/mp4"></input>⤐⥇⮑⟾⇝⤷⥂⇢</label>
</body>
<script>
document.getElementById("video").addEventListener('change', (event) => {
var d = document.getElementById("videoload");
d.innerHTML = "";
d.classList = "";
var v = document.createElement("video");
v.setAttribute("width", "100%");
v.setAttribute("controls", "");
v.src = window.URL.createObjectURL(event.target.files[0]);
document.body.appendChild(v);
});
</script>
</html>
