我有一个工作代码，可以将一个wowza manifest.mpd实时视频流嵌入到网站上的mpeg-dash播放器中，但为了使其工作，您必须将该URL放入清单文件，然后单击“连接”。
我需要摆脱输入框，让它在页面加载时自动加载清单文件。
我尝试将src添加到视频标记中作为清单网址，但它没有加载。我猜测当点击连接加载清单文件时，脚本也在做其他事情，但没有脚本知识，我不知道是什么。
任何人都可以建议我将代码更改为什么，以便它会像您点击连接时那样加载脚本，但会在页面加载时自动加载？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MPEG-DASH Player - Live Video Streaming</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<!-- Libraries -->
<script src="app/lib/jquery/js/jquery-1.8.3.min.js"></script>
<script src="app/lib/jquery/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- https://github.com/kriskowal/q -->
<script src="app/lib/q.js"></script>
<!-- https://github.com/creynders/dijon-framework -->
<script src="app/lib/dijon.js"></script>
<!-- Misc Libs -->
<script src="app/lib/xml2json.js"></script>
<script src="app/lib/objectiron.js"></script>
<script src="app/lib/long.js"></script>
<script src="app/lib/Math.js"></script>
<!-- Player -->
<script src="app/js/streaming/MediaPlayer.js"></script>
<script src="app/js/streaming/Context.js"></script>
<script src="app/js/streaming/ErrorHandler.js"></script>
<script src="app/js/streaming/Capabilities.js"></script>
<script src="app/js/streaming/Debug.js"></script>
<script src="app/js/streaming/VideoModel.js"></script>
<script src="app/js/streaming/vo/SegmentRequest.js"></script>
<script src="app/js/streaming/ManifestLoader.js"></script>
<script src="app/js/streaming/ManifestUpdater.js"></script>
<script src="app/js/streaming/ManifestModel.js"></script>
<script src="app/js/streaming/MediaSourceExtensions.js"></script>
<script src="app/js/streaming/SourceBufferExtensions.js"></script>
<script src="app/js/streaming/VideoModelExtensions.js"></script>
<script src="app/js/streaming/BufferExtensions.js"></script>
<script src="app/js/streaming/FragmentController.js"></script>
<script src="app/js/streaming/AbrController.js"></script>
<script src="app/js/streaming/FragmentLoader.js"></script>
<script src="app/js/streaming/Stream.js"></script>
<script src="app/js/streaming/BufferController.js"></script>
<script src="app/js/streaming/rules/SwitchRequest.js"></script>
<script src="app/js/streaming/rules/DownloadRatioRule.js"></script>
<script src="app/js/streaming/rules/InsufficientBufferRule.js"></script>
<script src="app/js/streaming/rules/LimitSwitchesRule.js"></script>
<script src="app/js/streaming/rules/BaseRulesCollection.js"></script>
<!-- Metrics -->
<script src="app/js/streaming/vo/MetricsList.js"></script>
<script src="app/js/streaming/MetricsModel.js"></script>
<script src="app/js/streaming/vo/metrics/BufferLevel.js"></script>
<script src="app/js/streaming/vo/metrics/HTTPRequest.js"></script>
<script src="app/js/streaming/vo/metrics/PlayList.js"></script>
<script src="app/js/streaming/vo/metrics/RepresentationSwitch.js"></script>
<script src="app/js/streaming/vo/metrics/TCPConnection.js"></script>
<script src="app/js/streaming/vo/metrics/DroppedFrames.js"></script>
<!-- Dash -->
<script src="app/js/dash/Dash.js"></script>
<script src="app/js/dash/DashContext.js"></script>
<script src="app/js/dash/vo/Segment.js"></script>
<script src="app/js/dash/DashParser.js"></script>
<script src="app/js/dash/DashHandler.js"></script>
<script src="app/js/dash/BaseURLExtensions.js"></script>
<script src="app/js/dash/FragmentExtensions.js"></script>
<script src="app/js/dash/DashManifestExtensions.js"></script>
<script src="app/js/dash/DashMetricsExtensions.js"></script>
<script src="app/js/dash/DashMetricsConverter.js"></script>
<!-- App -->
<!--script src="app/js/main.js"></script-->
<!-- Framework CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/wowza.css" type="text/css" />
<script>
function supports_media_source()
{
"use strict";
var hasWebKit = (window.WebKitMediaSource !== null && window.WebKitMediaSource !== undefined),
hasMediaSource = (window.MediaSource !== null && window.MediaSource !== undefined);
return (hasWebKit || hasMediaSource);
}
</script>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="span-18">
<h1>Live Video Streaming</h1>
<h2>MPEG-DASH Player</h2>
</div>
<div class="span-6 last">
<img src="img/wowza-logo_1024.png" class="logo" style="height:72px;width:205px" />
</div>
<hr class="heading">
<!-- END HEADER -->
<!-- EXAMPLE PLAYER: WIDTH of this player should be 630px, height will vary depending on the example-->
<div class="span-16">
<div id="supported" style="display:none">
<div>
<style>
video {
background-color: #000000;
}
</style>
<video id="videoObj" x-webkit-airplay="allow" controls alt="Example File" width="630" height="354" onerror="failed(event)" src="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"></video>
</div>
<table>
<tr>
<td>
<button id="playObj" type="button" style="width:50px" onclick="JavaScript:playControl()" disabled="disabled">Pause</button>
</td>
</tr>
<tr>
<td align="right">
<b>Stream:</b>
</td>
<td>
<input id="connectStr" size = "56" type="text" placeholder="" value="http://undergroundsoundz.com:1935/uszlive/myStream/manifest.mpd"/>
<button id="connectObj" type="button" style="width:80px" onclick="JavaScript:connect()">Connect</button>
</td>
</tr>
<tr>
<td align="right">
<b>Status:</b>
</td>
<td>
<label id="statusStr" size = "100" type="text" placeholder="" value="">Disconnected</label>
</td>
</tr>
</table>
</div>
<div id="debug_log" style="height: 425px; width: 630px; overflow: auto; clear: both;">
</div>
<script>
if ( supports_media_source() ) {
supported.style.display="";
videoObj.style.display="";
}
else {
notsupported.style.display="";
}
var player;
function connect()
{
if(connectObj.textContent == "Disconnect") {
if(player!=null)
player.stop();
videoObj.src = null;
videoObj.load();
connectObj.textContent = "Connect";
playObj.disabled = "disabled";
playObj.textContent = "Pause";
statusStr.textContent = "Disconnected";
}
else {
connectObj.textContent = "Disconnect";
playObj.disabled = "";
playObj.textContent = "Pause";
statusStr.textContent = "Playing";
var video = document.querySelector("video"),
context = new Dash.di.DashContext();
player = new MediaPlayer(context);
player.startup();
debug = player.debug;
//debug.init(console);
player.autoPlay = true;
player.attachView(video);
player.setIsLive(true);
player.attachSource(connectStr.value);
}
}
function playControl() {
if (videoObj.paused == false) {
videoObj.pause();
statusStr.textContent = "Paused";
playObj.textContent = "Play";
}
else {
videoObj.play();
statusStr.textContent="Playing";
playObj.textContent = "Pause";
}
}
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
statusStr.textContent='You aborted the video playback.';
break;
case e.target.error.MEDIA_ERR_NETWORK:
statusStr.textContent='A network error caused the video download to fail part-way.';
break;
case e.target.error.MEDIA_ERR_DECODE:
statusStr.textContent='The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
statusStr.innerHTML= 'The video could not be loaded, either because the server or network failed or because the format is not supported.<br/>';
statusStr.innerHTML+= '<span style="color:red;">Please close all tabs and then try running the appropriate <span style="font-style:italic;">LaunchDashPlayer</span> script for your system in your \"examples/LiveVideoStreaming/MPEGDASHPlayer\" folder.</span>';
break;
default:
statusStr.textContent = 'An unknown error occurred.';
break;
}
}
</script>
</div>
</div>
</body>