Difference between revisions of "Live Demo Test"
(→Testbed) |
(→Testbed) |
||
| Line 7: | Line 7: | ||
<html> | <html> | ||
| − | <!DOCTYPE html> | + | |
| + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head><title> | <head><title> | ||
| − | HTML5 | + | HTML5 MSE Player |
| − | </title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | + | </title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" href="HTML5Player/unreal_html5_player_styles_v1.css" /> |
| − | + | <script type="text/javascript" src="HTML5Player/unreal_html5_player_script_v2.js"></script> | |
| − | <script type="text/javascript" src="HTML5Player/ | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| − | var | + | |
| + | var bigbuttons = false; | ||
function OnMetadata() | function OnMetadata() | ||
{ | { | ||
| − | var remoteVideo = document.getElementById(" | + | var remoteVideo = document.getElementById("UnrealPlayer1_Video"); |
| − | + | var newWidth = Math.max(remoteVideo.videoWidth, 500); | |
| − | + | var newHeight = Math.max(remoteVideo.videoHeight, 300); | |
| + | |||
| + | changePlayerSize(newWidth, newHeight); | ||
| + | |||
| + | window.resizeTo(newWidth + 50, newHeight + 200); | ||
| + | } | ||
| + | |||
| + | function changePlayerSize(newWidth, newHeight) | ||
| + | { | ||
| + | var videoelement = document.getElementById("UnrealPlayer1_Video"); | ||
| + | videoelement.width = newWidth; | ||
| + | videoelement.height = newHeight; | ||
| + | |||
| + | var videoControls = document.getElementById("UnrealPlayer1_videoControls"); | ||
| + | var progress = document.getElementById("UnrealPlayer1_progress"); | ||
| + | |||
| + | videoControls.style.width = videoelement.width + "px"; | ||
| − | + | if (!bigbuttons) | |
| + | progress.style.width = videoelement.width - 280 + "px"; | ||
| + | else | ||
| + | progress.style.width = videoelement.width - 410 + "px"; | ||
} | } | ||
| + | |||
</script> | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | ||
<div align="center"><span id="LabelCam">Dahua-HDBW4231F-E2-M</span></div><br> | <div align="center"><span id="LabelCam">Dahua-HDBW4231F-E2-M</span></div><br> | ||
| + | |||
| + | <div> | ||
| − | < | + | <UnrealHTML5VideoPlayer id="UnrealPlayer1"></UnrealHTML5VideoPlayer> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <script type="text/javascript"> | |
| + | if ("MediaSource" in window && "WebSocket" in window) | ||
| + | { | ||
| + | RunPlayer("UnrealPlayer1", 800, 600, "65.23.154.147", 80, 0, "uVMS_79ae8666665aa4c3af58", "", true, true, 1, "", false); | ||
| + | document.getElementById("UnrealPlayer1_Video").addEventListener("loadedmetadata", OnMetadata); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | document.getElementById("UnrealPlayer1").innerHTML = "Media Source Extensions or Websockets are not supported in your browser."; | ||
| + | } | ||
| + | </script> | ||
</div> | </div> | ||
| − | + | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 17:05, 27 September 2018
Live Demo Test
URL
http://70.168.153.130/cgi-bin/mjpg/video.cgi?[channel=1]&subtype=1
Testbed
Dahua-HDBW4231F-E2-M