[这是我在这里的第一篇文章，因此对于所写格式是否有任何错误，我深表歉意。在过去的几天中，我一直在为有关带原子和布尔玛安全摄像机的html大学项目开发一个非常简单的页面，将它们链接到html时有些挣扎，因为即使所有的安全摄像机都是实时视频，对于某些人因此，只有在图像代码中编写代码时，该代码才会显示它。该代码基本上将100个以上对象的数组中的数字随机化，然后选择2个不同的对象，然后并排显示它们，页面每60秒刷新一次，显示另一组2张图像。问题是，当我完成所有操作之后，在atomic-live-server上完美运行后，我保存了该文件并尝试直接使用浏览器打开，这是我的教授将要打开的方式，但是没有显示媒体而且只有一个图标。尝试将其上传到网站也是如此。所有的安全摄像机链接都来自开放的IP，都是http的，不受保护，但是当直接在代码外部完成操作时，也可以在atom-live-server上打开浏览器中的所有链接。
这是JS部分的样子：
script type="text/javascript"
window.onload = choosePic;
var myPix = new Array
("//180.23.155.164:8082/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XuE-YLJZhYI.link",
"//180.220.70.194:1024/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujHZZ-5jOU.link",
"//107.85.194.33:8081/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujTCpm4q4M.link",
"//5.11.180.152:8080/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujSfteGlxY.link"
//there's a lot of links so I'll spare you all of that
);
function choosePic() {
var randomNum = Math.round(Math.random()* myPix.length);
var randomNum2 = Math.round(Math.random()* myPix.length);
while (randomNum === randomNum2) {
randomNum2 = Math.round(Math.random()*myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
document.getElementById("myPicture2").src = myPix[randomNum2];
}
这是正文中的代码：
<body>
<section class="hero is-fullheight has-background-black">
<div class="hero-body">
<div class="container">
<!--<p href="" class="title is-size-4 has-text-white center">Peek</p>!-->
<figure class="center">
<img src="" width="640" height="480" id="myPicture">
<img src="" width="640" height="480" id="myPicture2">
</figure>
</div>
</div>
</section>
</body>
我认为这可能与链接的格式有关，但我不确定。感谢您的帮助，我对编码和html总体而言还是很陌生。预先感谢！
首先从src=中删除<img>属性，其次由于不安全而在相机URL地址中使用http://...。
[有一个摄像头馈送-一个带有道路和汽车的摄像头-有时由于服务器问题而无法加载。其他相机资源也很好。
document.addEventListener("DOMContentLoaded", function(event) {
// Camera sources - must hasve 'http' if not secured
var myPix = new Array(
"http://180.23.155.164:8082/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XuE-YLJZhYI.link",
"http://180.220.70.194:1024/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujHZZ-5jOU.link",
"http://107.85.194.33:8081/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujTCpm4q4M.link",
"http://5.11.180.152:8080/-wvhttp-01-/GetOneShot?&frame_count=1000000000#.XujSfteGlxY.link"
);
function choosePic() {
var randomNum = Math.round(Math.random() * myPix.length);
var randomNum2;
// Keep generating randomNum2 if randomNum equals randomNum2
do {
randomNum2 = Math.round(Math.random() * myPix.length)
} while(randomNum === randomNum2);
document.getElementById("myPicture").src = myPix[randomNum];
document.getElementById("myPicture2").src = myPix[randomNum2];
}
// First loading of camera resources
choosePic();
// Execute choosePic() every 60000ms = 60s
setInterval(choosePic, 60000);
});<section class="hero is-fullheight has-background-black">
<div class="hero-body">
<div class="container">
<!--<p href="" class="title is-size-4 has-text-white center">Peek</p>!-->
<figure class="center">
<img width="640" height="480" id="myPicture">
<img width="640" height="480" id="myPicture2">
</figure>
</div>
</div>
</section>