Связанные изображения не отображаются на HTML при открытии вне Atom - PullRequest
Новая
       91

Связанные изображения не отображаются на HTML при открытии вне Atom

0 голосов
/ 17 июня 2020

Это мой первый пост, поэтому прошу прощения, если что-то не так с форматом, который я пишу. В течение последних нескольких дней я разрабатывал очень простую страницу для университетского проекта html о камерах безопасности с атомом и bulma, у меня было несколько трудностей, связав их с html, потому что, хотя все камеры безопасности работают video по какой-то причине код будет отображать его только в том случае, если он был написан в коде изображения. Код в основном рандомизирует число в массиве из 100+ объектов и выбирает 2 разных, затем они отображаются рядом, страница обновляется каждые 60 секунд, показывая еще один набор из 2 изображений. Проблема в том, что после того, как я закончил все это, отлично работая на сервере atom-live-server, я сохранил его и попытался открыть напрямую в браузере, как мой профессор собирается открыть, но там медиа не отображается. а там только значок. То же самое с попыткой загрузить его на веб-сайт. Все ссылки на камеры безопасности поступают с открытых IP-адресов, являются http и не защищены, но я мог бы открыть их все в браузере, если это было сделано непосредственно вне кода, а также на сервере atom-live.

Вот на что похожа часть 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 в целом. Заранее спасибо!

1 Ответ

0 голосов
/ 17 июня 2020

Во-первых, удалите атрибуты src= из <img> s, во-вторых, используйте http://... в URL-адресах вашей камеры, потому что они не защищены.

Есть один канал камеры - с дорогой и cars - тот иногда не загружается из-за проблем с сервером. Другие ресурсы камеры в порядке. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...