映像受信していることを知らせたい

前提・実現したいこと

映像を受信している際に、

現在映像受信中です....

というメッセージを表示させたい。

発生している問題・エラーメッセージ

過去に質問した、遠くのカメラ映像を表示は、配布されているandroidアプリを使用し、<iframe>でURLを埋め込みました。

映像を受信している際に、受信をしていると表示させたいのですが、失敗してしまいます。
ご指摘よろしくお願いします。

該当のソースコード

html
1<html>
2  <p> 
3  <font size="3" color="000000">
4  現在接続状況
5  <font size="3" color="ff0000">
6  良好
7</div>
8<font size="8" color="#ff0000">
9<p class="text_center">CLANE STAR ONLINE  
10           　<hr size="5">          
11<html lang="ja">
12<head>
13
14<meta charset="utf-8">
15<link rel="stylesheet" href="./style.css">
16</head>
17<body>  
18      <body onContextmenu="window.alert('右クリック禁止です。');return false">
19<body oncopy="return false;">                                <form action="http://localhost/clane/online/home.php"method="post">
20<input type="image" src="http://localhost/clane/online/image/home.jpg" alt=" "></p>
21<meta http-equiv="content-type" charset="utf-8">
22<head>
23<body bgcolor="#4169e1">
24<font size="8" color="#ff0000">
25
26<title>CLANE STAR ONLINE</title>
27 
28 
29</body>
30</html>
31
32  <p> 
33</div>
34
35
36<pre>
37 
38 <img src="http://localhost/clane/online/image/No1.jpg">
39    
40
41<font size="3" color="#000000">
42<html>
43<head>
44
45<iframe width="600" height="500" src="http://192.168.11.14:8080/video" scrolling="no"
46 frameborder="0">
47
48</div></div>
49 </iframe>
50</body>
51</html>
52
53
54
55</script>
56</body>
57</html>

試したこと

画像の上に文字を埋め込む際に使う

html
1<div style="position: relative; display:inline-block;">
2<img src=".http://192.168.11.14/video/" alt="topimg"> 
3<div style="position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; padding: 30px; text-align: left;">
4<p>ここに文章を書く</p>
5</div></div>

で試しましたが、表示もされません。

補足情報（FW/ツールのバージョンなど）

localhost
XAMPP

行動規範の内容に同意します

回答2件

スマホからなので簡単に。試せてません。

予め<iframe>の上にローディング中メッセージをかぶせておいて、

↓な感じ。適切に調整してください

html
1<style>
2    div {
3        position: relative;
4    }
5
6    iframe {
7        position: absolute;
8    }
9
10    img {
11        position: absolute;
12        opacity: 0.5;
13    }
14    /* relative
15    absolute */
16</style>
17<div>
18    <iframe width="600" height="500" onload="loaded()" src="http://192.168.11.14:8080/video" scrolling="no">
19    </iframe>
20    <img id="wait" width="600" height="500"
21        src="https://placehold.jp/3d4070/ffffff/600x500.png?text=%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E4%B8%AD"></img>
22</div>
23<script>
24    function loaded() {
25        var obj = document.getElementById("wait");
26        obj.style.opacity = 0.1; //動作確認のために透過率を換える。実際にはDisplay:noneとかにしたほうが良いかと
27    }
28</script>

投稿2020/03/07 10:39

編集2020/03/08 03:27

oikashinoa

総合スコア2826

oikashinoa

2020/03/07 11:19

そもそも以下だと、lan内しかアクセスできないですよね。 http://192.168.11.14/video/ あとiframe無しで直接アクセスしたら動画再生するんですか？そもそもここには何があるの？

退会済みユーザー

2020/03/07 12:16

将来的には、全国の方がライブを見て、ゲームをプレイできるようにしたいと思っています。 http://192.168.11.14/video/にはandroidのカメラ映像を生で見ることができるファイルです。実際はライブ映像が流れています。 192.168.11.14をポート開放し、だれでも見れるようにする予定です。

退会済みユーザー

2020/03/07 12:18

直接アクセスをすると、接続拒否される場合と映像を見ることができる場合があります。 <iframe>だとandroidserver側が起動している際に、確定で映像を見れます。

oikashinoa

2020/03/08 03:28

> androidのカメラ映像を生で見ることができるどんなアプリ使ってるんですか？あと、動作サンプルを本文に書いてみました。

退会済みユーザー

2020/03/08 03:55

IP webcam を使っています。コードありがとうございます。使用してみます。

oikashinoa

2020/03/08 04:00

iframeのソースがどうなっているかにもよりますが、onloadが走らないかもしれないです。イベントが取れるか試行錯誤してみてください。

退会済みユーザー

2020/03/08 04:05

今使用したのですが、受信していますの画像文字？が消えないのですが、どうすればいいでしょうか。 onloadなど色々分からないものがあります。

oikashinoa

2020/03/08 04:55

http://192.168.11.14:8080/videoの動画が表示しても、”受信しています”が消えないのですか？表示しない時ってAndoidの画面が消えてませんか？

退会済みユーザー

2020/03/08 04:57

その通りです。表示されない時はandroidserverが停止しています。

退会済みユーザー

2020/03/08 04:57

質問に画像を追加しておきます。

oikashinoa

2020/03/08 05:06 編集

Androidで画面消えた時に無線LAN切る設定があったと思うので調べて下さい。常時接続出来たら提案したコード自体不要になります。

退会済みユーザー

2020/03/08 05:13

現在の現状画像を追加しました。常時接続というか...映像を受信するのに2秒程時間がかかるので、案内を画面に出せるといいと思い、質問させていただきました。付かないという事は、サーバーが動いていないので、説明欄にメンテナンス中と書きます

oikashinoa

2020/03/08 05:28 編集

>> <iframe>で読み込み中の際に、「映像を受信しています」とど真ん中に表示 > 映像を受信するのに2秒程時間がかかるので、案内を画面に出せるといいと思い一番重要な事を書かないとなぁ orz 決め打ちで”受信しています”画像を2秒後に消せばいいんじゃないでしょうか？(css keyframeで調べて下さい。opacityを調整して徐々に透明にすればOKでしょう)

退会済みユーザー

2020/03/08 06:10

調べてみて、自力で頑張ってみたのですがあまり理解が出来ず、教えて頂くことは可能ですか？

oikashinoa

2020/03/08 06:51 編集

見放しているわけではなく、中級者になる為の必須スキルです。レベルアップしたければ、ドキュメントを読むクセとデバッグは出来るようになりましょう。以下を読んで理解できなければ、わからない部分を別質問すると良いでしょう。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations https://developer.mozilla.org/ja/docs/Web/CSS/animation

oikashinoa

2020/03/08 07:47

関連する質問でレベルアップする気はないと理解しましたので、これ以上の発言はやめます。

行動規範の内容に同意します

そもそも画像のリンク間違っていませんか？
<img src=".http://192.168.11.14/video/" alt="topimg">
-><img src="http://192.168.11.14/video/" alt="topimg">？

投稿2020/03/07 06:42

kyoya0819

総合スコア10429

kyoya0819

2020/03/07 06:43

あと、受信の通知というのはどう言った状態でしたいのですか？ iframeで読み込み中？読み込み後？再生中？いつ？ iframeの上？下？どこ？

退会済みユーザー

2020/03/07 06:51

実際は映像を表示させるのですが、画像として認識されないかと思い、<img>を使いました。。。例えばyoutubeなども動画を押してすぐに動画が始まる時と始まらない時があります。なかなか始まらない時に映像を受信していますと表示をさせたいのです。なので、<iframe>で読み込み中の際に、「映像を受信しています」とど真ん中に表示させたいです。

行動規範の内容に同意します

あなたの回答