Toggle sidebar

Gaming Testing out HTML5 Code on this page

Ubuntuの刀

Ubuntuの刀

:^D
Member
Level 4
Joined
Apr 12, 2009
Messages
379
Reaction score
223
Trophies
1
Age
30
XP
570
Country
United States
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><html><head>


<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>HTML5 Video Player</title>
<script type="text/javascript" charset="utf-8">

var video;
var controls;
var playControl;
var progressControl;
var progressHolder;
var playProgressBar;
var playProgressInterval;
var currentTimeDisplay;
var durationDisplay;
var volumeControl;
var volumeDisplay;
var fullScreenControl;

var videoWasPlaying;
var videoIsFullScreen;
var videoOrigWidth;
var videoOrigHeight;

var bodyLoaded = function(){
video = document.getElementById("video");
controls = document.getElementById("controls");
playControl = document.getElementById("play");
progressControl = document.getElementById("progress");
progressHolder = document.getElementById("progress_box");
playProgressBar = document.getElementById("play_progress");
currentTimeDisplay = document.getElementById("current_time_display");
durationDisplay = document.getElementById("duration_display");
volumeControl = document.getElementById("volume");
volumeDisplay = document.getElementById("volume_display");
fullScreenControl = document.getElementById("full_screen");

showController();
positionController();

playControl.addEventListener("click", function(){
if (video.paused) {
playVideo();
} else {
pauseVideo();
}
}, true);

progressHolder.addEventListener("mousedown", function(){
stopTrackingPlayProgress();

if (video.paused) {
videoWasPlaying = false;
} else {
videoWasPlaying = true;
video.pause();
}

blockTextSelection();
document.onmousemove = function(e) {
setPlayProgress(e.pageX);
}

document.onmouseup = function() {
unblockTextSelection();
document.onmousemove = null;
document.onmouseup = null;
if (videoWasPlaying) {
video.play();
trackPlayProgress();
}
}
}, true);

progressHolder.addEventListener("mouseup", function(e){
setPlayProgress(e.pageX);
}, true);

volumeControl.addEventListener("mousedown", function(){
blockTextSelection();
document.onmousemove = function(e) {
setVolume(e.pageX);
}
document.onmouseup = function() {
unblockTextSelection();
document.onmousemove = null;
document.onmouseup = null;
}
}, true);

volumeControl.addEventListener("mouseup", function(e){
setVolume(e.pageX);
}, true);

updateVolumeDisplay();

fullScreenControl.addEventListener("click", function(){
if (!videoIsFullScreen) {
fullScreenOn();
} else {
fullScreenOff();
}
}, true);
}

function playVideo(){
video.play();
playControl.className = "pause control";
trackPlayProgress();
}

function pauseVideo(){
video.pause();
playControl.className = "play control";
stopTrackingPlayProgress();
}

function positionController(){
controls.style.top = (video.offsetHeight - controls.offsetHeight) + "px";
controls.style.left = "0px";
controls.style.width = video.offsetWidth + "px";
sizeProgressBar();
}

function showController(){
controls.style.display = "block";
}

function hideController(){
controls.style.display = "none";
}

function sizeProgressBar(){
progressControl.style.width = (controls.offsetWidth - 125) + "px";
progressHolder.style.width = (progressControl.offsetWidth - 80) + "px";
updatePlayProgress();
}

function trackPlayProgress(){
playProgressInterval = setInterval(updatePlayProgress, 33);
}

function stopTrackingPlayProgress(){
clearInterval(playProgressInterval);
}

function updatePlayProgress(){
playProgressBar.style.width = ((video.currentTime / video.duration) * (progressHolder.offsetWidth - 2)) + "px";
updateTimeDisplay();
}

function setPlayProgress(clickX) {
var newPercent = Math.max(0, Math.min(1, (clickX - findPosX(progressHolder)) / progressHolder.offsetWidth));
video.currentTime = newPercent * video.duration
playProgressBar.style.width = newPercent * (progressHolder.offsetWidth - 2) + "px";
updateTimeDisplay();
}

function updateTimeDisplay(){
currentTimeDisplay.innerHTML = formatTime(video.currentTime);
if (video.duration) durationDisplay.innerHTML = formatTime(video.duration);
}

function setVolume(clickX) {
var newVol = (clickX - findPosX(volumeControl)) / volumeControl.offsetWidth;
if (newVol > 1) {
newVol = 1;
} else if (newVol < 0) {
newVol = 0;
}
video.volume = newVol;
updateVolumeDisplay();
}

// Unique to these controls.
function updateVolumeDisplay(){
var volNum = Math.floor(video.volume * 6);
for(var i=0; i<6; i++) {
if (i < volNum) {
volumeDisplay.children.style.borderColor = "#fff";
} else {
volumeDisplay.children.style.borderColor = "#555";
}
}
}

function fullScreenOn(){
videoIsFullScreen = true;
videoOrigWidth = video.offsetWidth;
videoOrigHeight = video.offsetHeight;

video.style.width = window.innerWidth + "px";
video.style.height = window.innerHeight + "px";
video.style.position = "fixed";
video.style.left = 0;
video.style.top = 0;
controls.style.position = "fixed";
positionController();

fullScreenControl.className = "fs-active control";
}

function fullScreenOff(){
videoIsFullScreen = false;
video.style.width = videoOrigWidth + "px";
video.style.height = videoOrigHeight + "px";
video.style.position = "static";
controls.style.position = "absolute";
positionController();
fullScreenControl.className = "control";
}

function blockTextSelection(){
document.body.focus();
document.onselectstart = function () { return false; };
}

function unblockTextSelection(){
document.onselectstart = function () { return true; };
}

// Return seconds as MM:SS
function formatTime(seconds) {
seconds = Math.round(seconds);
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}

// Get objects position on the page
function findPosX(obj) {
var curleft = obj.offsetLeft;
while(obj = obj.offsetParent) {
curleft += obj.offsetLeft;
}
return curleft;
}

</script>
<style type="text/css" media="screen">
body { background-color: #222; }

#video_box { position: relative; }
#video { background-color: #000; }
#controls { display: none; opacity: 0.85; color: #fff; position: absolute; height: 30px; }
.control { float: left; height: 25px; width: 25px; margin-right: 5px; background-color: #001E25; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.control:last-child { margin-right: 0; }
.control:first-child { margin-left: 5px; }
#play span { display: block; font-size: 0px; line-height: 0; }
#play.play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #001E25; border-left: 10px solid #fff; border-bottom: 5px solid #001E25; }
#play.pause span { width: 3px; height: 10px; margin: 8px auto 0; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; }
#progress { width: 190px; }
#progress #progress_box { float: left; width: 100px; height: 9px; border: 1px solid #777; background-color: #001E25; margin: 7px 0 0 5px; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#progress #play_progress { display: block; width: 0px; height: 9px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#progress #load_progress { display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#progress #play_time { float: left; margin: 7px 0 0 5px; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
#volume { width: 50px; }
#volume span { display: block; margin: 4px 0 0 5px; }
#volume ul { display: block; margin: 0; padding: 0; list-style: none; }
#volume ul li { float: left; margin: 0; padding: 0; list-style: none; width: 5px; margin-right: 2px; height: 0px; border-bottom: 18px solid #555; }
#volume ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
#volume ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
#volume ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
#volume ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
#volume ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
#full_screen span { display: block; float: left; margin: 5px 0 0 5px; padding: 0; }
#full_screen span table { width: 20px; height: 20px; margin: 0; padding: 0; text-align: left; vertical-align: top; }
#full_screen span table td { margin: 0; padding: 0; text-align: left; vertical-align: top; }
#full_screen span table tr:first-child td:first-child { width: 9px; height: 9px; }
#full_screen .fs-corner { font-size: 0; line-height: 0; width: 0; }
#full_screen #fs_top_left { border: none; border-top: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen #fs_top_right { border: none; border-top: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen #fs_bottom_left { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen #fs_bottom_right { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen.fs-active #fs_top_left { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen.fs-active #fs_top_right { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen.fs-active #fs_bottom_left { border: none; border-top: 6px solid #fff; border-left: 6px solid #001E25; }
#full_screen.fs-active #fs_bottom_right { border: none; border-top: 6px solid #fff; border-right: 6px solid #001E25; }
#full_screen.fs-active span table tr:first-child td:first-child { width: 13px; height: 13px; }
#full_screen.fs-active span { display: block; float: left; margin: 3px 0 0 3px; padding: 0; }
</style>
</head><body id="body" onload="bodyLoaded();">

<div id="video_box">
<video tabindex="0" id="video" poster="poster.jpg" autobuffer="" width="640" height="360">
<source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4" type="video/mp4">
<source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.ogg" type="video/ogg"><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object type="video/quicktime" data="demo-video-player_files/trailer_test.mp4" width="640" height="375">
<!--<![endif]-->
<param name="src" value="http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4">
<param name="showlogo" value="false">
<param name="autoplay" value="false">
</object></video>
<div style="display: block; top: 330px; left: 0px; width: 640px;" id="controls">
<div id="play" class="play control">
<span></span>
</div>
<div style="width: 515px;" id="progress" class="control">
<div style="width: 435px;" id="progress_box">
<span id="load_progress"><span style="width: 0px;" id="play_progress"></span></span>
</div>
<div id="play_time">
<span id="current_time_display">00:00</span> / <span id="duration_display">00:33</span>
</div>
</div>
<div id="volume" class="control">
<span>
<ul id="volume_display">
<li style="border-color: rgb(255, 255, 255);"></li><li style="border-color: rgb(255, 255, 255);"></li><li style="border-color: rgb(255, 255, 255);"></li><li style="border-color: rgb(255, 255, 255);"></li><li style="border-color: rgb(255, 255, 255);"></li><li style="border-color: rgb(255, 255, 255);"></li>
</ul>
</span>
</div>
<div id="full_screen" class="control">
<span>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><div id="fs_top_left" class="fs-corner"></div></td>
<td><div id="fs_top_right" class="fs-corner"></div></td>
</tr>
<tr>
<td><div id="fs_bottom_left" class="fs-corner"></div></td>
<td><div id="fs_bottom_right" class="fs-corner"></div></td>
</tr>
</tbody></table>
</span>
</div>
</div>
</div>

</body></html>
Code:
</div>


Since I have no clue on how to post html on this page(w/o it showing the "code"), you guys can try this on a website you have and see if it works. If you don't wanna go through the hassle, go to html5tube.webs.com(that's my site)
Otherwise, CAN SOMEBODY PLEASE TELL ME HOW TO POST HTML AND DISPLAY IT!!! Thank you <img src="style_emoticons/<#EMO_DIR#>/lecture.gif" style="vertical-align:middle" emoid=":teach:" border="0" alt="lecture.gif" />
 
We do not allow HTML for non staff as it has the potential to mess up the site layout or worse if the person has malicious intent and when it comes down to is most of the time BBCODE can be twisted to do most things basic HTML can do (even if you have to use something like http://www.teamopolis.com/tools/bbcode-table-generator.aspx ) and it is far safer for the site and users.

Still have you not got something like firebug- http://getfirebug.com/ and/or one of the many development tools available ( https://addons.mozilla.org/en-us/firefox/tag/debugging for starters)- obviously you can not do anything with PHP (does client side PHP even exist?) and other fun web development methods but it does allow you to do interesting things with HTML and javascript (client side stuff) or indeed sites depending on what their forms do. If you need something slightly more permanent then you can turn your edits into a greasemonkey script.

"back on topic" I do not think mainline firefox has HTML5 just yet (not to mention it did not get on well with my security) but I did manage to add it in (badly- the page ultimately had two headers) and it half worked from what I saw.

Equally http://www.uniformserver.com/ is quite nice to have.
 

Site & Scene News

Go to forum More news

Popular threads in this forum

Inflation strikes again!

Feedback  Windows 11 LTSC... The Good Edition of 11?

Official Windows 11 Xbox emulator internal data has some interesting content

Is bazzite really worth it for steamdeck

call of duty wont launch

Steam Deck OLED no post, active LED.

Translation  Senran Kagura Burst Re:Newal Delocalization / Translation Mod

Hacking Gaming Review  Disney Dreamlight Valley Profile