2014/4/16

[JavaScript] Iframe Communication

最近遇到了要跟 IFrame 去做互動
使用JavaScript可以達成這樣的需求



首先來製作Parent.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Parent Frame</title>
    <style type="text/css">
        #PT1
        {
            width: 129px;
        }
        #PT2
        {
            width: 168px;
        }
    </style>
</head>
<body>
    <div>
        Send to Child:
        <br />
        <input type="text" id="PT1" size="20" />
        <input type="button" value="Send" onclick="SendMsgToChild()" />
        <br />
        <br />
        Receive From Child:
        <br />
        <input type="text" id="PT2" size="20" /><br />
        <br />
        <hr />
        <iframe src="Child.htm" id="Childframe" width="250px" height="180px"></iframe>
    </div>
</body>
</html>
<script type="text/javascript">
    function SendMsgToChild() {
        document.getElementById('Childframe').contentWindow.ReceiveMsgFromParent(document.getElementById('PT1').value);
    }

    function ReceiveMsgFromChild(message) {
        document.getElementById('PT2').value = message;
    }
</script>


看到裡面有一個<IFrame>的控制項,這邊決定子視窗的路徑
id="Childframe"很重要,要給他id,之後才能找到他

按鈕的觸發事件就會傳送訊息給Child.htm,會去呼叫他的ReceiveMsgFromParent()
document.getElementById('Childframe').contentWindow.ReceiveMsgFromParent(document.getElementById('PT1').value);

ReceiveMsgFromChild()是接收來自Child.htm的訊息


接著來看 Child.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Child Frame</title>
    <style type="text/css">
        #CT2
        {
            width: 129px;
        }
        #CT1
        {
            width: 168px;
        }
    </style>
</head>
<body>
    <div>
        Receive From Parent:
        <br />
        <input type="text" id="CT1" size="20" /><br />
        <br />
        Send to Parent:
        <br />
        <input type="text" id="CT2" size="20" />
        <input type="button" value="Send" onclick="SendMsgToParent()" />
        <br />
    </div>
</body>
</html>
<script type="text/javascript">
    function SendMsgToParent() {
        parent.ReceiveMsgFromChild(document.getElementById('CT2').value);
    }

    function ReceiveMsgFromParent(message) {
        document.getElementById('CT1').value = message;
    }
</script>


這邊可以看到ReceiveMsgFromParent(),這個就是給Parent呼叫的

按鈕的觸發事件會去呼叫"Parent"的Function
這邊的Parent是關鍵字,會直接導向呼叫這IFrame的那一頁
不用知道父視窗的id
 parent.ReceiveMsgFromChild(document.getElementById('CT2').value);

假設有多層的IFrame呼叫"祖父"的那一頁
只要這樣寫
parent.parent.ReceiveMsgFromChild(document.getElementById('CT2').value);


Demo:

2014/1/27

[JavaScript] RTSP streamed by VLC

最近遇到一個需求,要在網頁上呈現透過RTSP方式傳送的影音串流

我這邊是選用 VLC Player  Plug-in
主要原因是因為它可以跨瀏覽器支援
在IE、FireFox、Chrome 上都可以使用

在寫程式之前,要先測試RTSP的串流是否有正常的發送
可以先下載VLC media player來進行測試

媒體 -> 開啟網路串流
在裡面輸入要測試的RTSP串流的位址



接著來完成網頁的部分
其實這個範例只有單純的使用到HTML
但是如果要對影音串流做控制就需要JavaScript的幫忙了

<!DOCTYPE html>
<html><body>
<object
  classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
  codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
  id="vlc"
  name="vlc"
  class="vlcPlayer"
  events="True">
    <param name="Src" value="rtsp://Your Address" />
    <param name="ShowDisplay" value="True" />
    <param name="AutoLoop" value="False" />
    <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://Your Address" ></embed>
</OBJECT>
</html></body>

這邊嵌入的<Object>就是控制VLC player呈現的控制項
注意這邊有兩地方要輸入 RTSP的位址

給IE看的
<param name="Src" value="rtsp://Your Address" />

給FireFox、Chrome看的
 <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://Your Address" ></embed>


研究過程中有看到說 HTML5 的 Video Tag可以支援RTSP
但是我怎麼試都是不成功....後來才發現有另一派的言論說HTML5不支援

如果有一天HTML5支援RTSP,就會變得很方便了


範例檔


參考資料:
http://stackoverflow.com/questions/14711438/vlc-javascript-api-on-ie

http://nerijuso.lt/how-stream-video-with-vlc-plugin-in-your-website/

http://stackoverflow.com/questions/3120027/embed-vlc-player-in-html