[Broken] HTML5 Video - MP4 Player

hacxx · 10-29-2018, 10:34 PM

Hi, i decided to build my own small HTML 5 / MP4 Video Player. The only thing that is necessary is the user type the video url. After all the coding i went to test and it fails, i have revise the code and couldn't find the error. Can anyone have a look?

Code:
<html><head><title>HTML5 Video / MP4 Player</title></head>
<body bgcolor=#5e717f><br><br><br><br><br>
<table style="background: #bed5e2;" cellspacing=0 cellpadding=0 align=center>
<tbody>
<tr>
<td style="border-right: #d8d8d8 0.75pt solid; padding-right: 6pt; border-top: #d8d8d8 0.75pt solid; padding-left: 6pt; background: #567280; padding-bottom: 6pt; border-left: #d8d8d8 0.75pt solid; width: 317.5pt; padding-top: 6pt; ">
<p>
<b><span style="font-size: 10pt; color: #ff9900; font-family: verdana; mso-ansi-language: en-gb">HTML5 Video / MP4 Player</span></b>
</p></td></tr><tr></td></tr><tr>
<td style="padding-right: 6pt; padding-left: 6pt; padding-bottom: 6pt; padding-top: 6pt"><br>
<center><table border=0 cellpadding=3 cellspacing=0><tr><td>
<p style="margin:0cm;margin-bottom:.0001pt;line-height:115%">
<span style="font-size:9.0pt;font-family:verdana;">Play HTML 5 / MP4 Videos.</p>
</td></tr></table>
<script>
video = function() {
var video_id = escape(document.getElementById('video_id').value);
if(video_id == ""){alert('Type something!');return false;}
document.write("<html><head><title>HTML5 Video / MP4 Player</title><br><br><br><body bgcolor=#5e717f><br><table style='background: #bed5e2;' cellspacing=0 cellpadding=0 align=center><tbody><tr><td style='border-right: #d8d8d8 0.75pt solid; padding-right: 6pt; border-top: #d8d8d8 0.75pt solid; padding-left: 6pt; background: #567280; padding-bottom: 6pt; border-left: #d8d8d8 0.75pt solid; width: 317.5pt; padding-top: 6pt; '><p><b><span style='font-size: 10pt; color: #ff9900; font-family: verdana; mso-ansi-language: en-gb'>HTML5 Video / MP4 Player</span></b></p></td></tr><tr></td></tr><tr><td style='padding-right: 6pt; padding-left: 6pt; padding-bottom: 6pt; padding-top: 6pt'><br><center><table border=0 cellpadding=3 cellspacing=0><tr><td><p style='margin:0cm;margin-bottom:.0001pt;line-height:115%'><span style='font-size:9.0pt;font-family:verdana;'></p></td></tr></table><br>");
document.write('<video width="320" height="200" controls><source src="'+video_id+'" type="video">Your browser does not support the video tag.</video><br><br><br>');
document.write("<table style='background: #bed5e2; width: 317.5pt; border-collapse: collapse; mso-padding-alt: 6.0pt 6.0pt 6.0pt 6.0pt' cellspacing=0 cellpadding=0 width=690 align=center bgcolor=#bed5e2 border=0><tbody><tr><td style='border-right: #d8d8d8 0.75pt solid; padding-right: 6pt; border-top: #d8d8d8 0.75pt solid; padding-left: 6pt; background: #567280; padding-bottom: 6pt; border-left: #d8d8d8 0.75pt solid; width: 450pt; padding-top: 6pt; border-bottom: medium none'><center><p><b><span style='font-size: 10pt; color: #c2dceb; font-family: verdana; mso-ansi-language: en-gb'>Copyright © 2018-2019 Privateloader</span></b></td></tr></tr></tbody></div></div></table></body></html>");
}
</script>
<p>
<table>
<tr><td>Video URL: </td><td><input type="text" id="video_id" placeholder="eg. http://example.com" style="width: 100%"></td><td><input type="button" value="Play" onclick="video()"></td></tr>
</table>
</p>

<table style="background: #bed5e2; width: 317.5pt; border-collapse: collapse; mso-padding-alt: 6.0pt 6.0pt 6.0pt 6.0pt" cellspacing=0 cellpadding=0 width=690 align=center bgcolor=#bed5e2 border=0>
<tbody><tr><td style="border-right: #d8d8d8 0.75pt solid; padding-right: 6pt; border-top: #d8d8d8 0.75pt solid; padding-left: 6pt; background: #567280; padding-bottom: 6pt; border-left: #d8d8d8 0.75pt solid; width: 450pt; padding-top: 6pt; border-bottom: medium none">
<center><p><b><span style="font-size: 10pt; color: #c2dceb; font-family: verdana; mso-ansi-language: en-gb">Copyright © 2018-2019 Privateloader</span></center></b>
</td></tr>
</tr></tbody></div></div>
</table>
</body>
</html>

Thanks

slothic · 11-03-2018, 11:20 AM

Not really That Familiar With This But I Had A Look And I Think The Problem Could Be That It's Thinking That The Video Is From A Path Instead Of A URL.

chunky · 11-06-2018, 06:33 PM

Check out decodeURIComponent() and take a look at MIME types.
Use type="video/mp4" for mp4 videos and the URL gets encoded so it isn't put in the source tag properly.

[Image: 5ZZOPJa.png]

(The %3A is supposed to be a : )

Change line 32 to the following and it will work:

Code:
document.write('<video width="320" height="200" controls><source src="' + decodeURIComponent(video_id) + '" type="video/mp4">Your browser does not support the video tag.</video><br><br><br>');

Btw the code is very bad actually so you should think about improving it Wink

hacxx · 11-09-2018, 01:42 PM

Thanks that seems to fix it.