質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

1097閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/07 05:02

前提・実現したいこと

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

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

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

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

過去に質問した、遠くのカメラ映像を表示は、配布されている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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

<iframe onload=スクリプト書くべし>でローディング要素を消せば実現できるかと。

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

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: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など色々分からないものがあります。
退会済みユーザー

退会済みユーザー

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 07:47

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

0

そもそも画像のリンク間違っていませんか?
<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>で読み込み中の際に、「映像を受信しています」とど真ん中に表示させたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問