Javaの設計哉之道

如果你想…

• 用Swing的元件操控YouTube
• 取得播放時的各項資訊在Swing上面顯示
• 播放操控其它網路影音

這篇文章應該可以幫助您 :)

要操控YouTube上面播放的影音，要先去看它的內部是如何運作的 - 說穿了，其實就是JavaScript…

當然這些網路上也有滿多的解釋，不過這邊還是稍為說明一下...

在YouTube APIs and Tools中，可容易的找到操控YouTube的 Player API。

Player API有提到說播放YouTute有二種方式

The first thing you should know is there are two kinds of players: the normal "embedded" player you've seen around the web, and a second "chromeless" player that is just a video box without any controls.

這二種方式都可以透過JavaScript或ActionScript來做操控...

第一種是利用<embed>的方式嵌入網頁，而第二種（它們稱為chromeless）是沒有任何的控制面版的 - 這正是我們想要的：）

關於第二種，網頁上有做出一個簡單的example，來說明如何利用JavaScript去控制它...

好了，前面說了這麼多廢話（？），差不多該進入主題了ＸＤ

• Swing到底是怎麼與它（YouTube)做溝通的

在先前的文章中有提到JWebBrowser有個方法可以去設置網頁的主體內容

public boolean setHTMLContent(String html)

也就是說，我們可以把在這個網頁中放置一些操控YouTube的JavaScript程式（ 就如同在chromeless網頁原始檔中所見到的JavaScript ），接著再利用此方法：

public void executeJavascript(String javascript)

這個方法不但可以直接在Java程式碼執行JavaScript，也可以直接讀取HTML裡面的JavaScript Function，說到這應該有人已經知道是怎麼一回事了：）

簡單整理一下整個流程：

1. 【取得】或【自行設計】一個可以用來播放YouTube的網頁。
2. 在網頁內放置操控YouTube的JavaScript Function。這個網路上有很多可以參考
3. 設計好一個含有JWebBrowser元件的Swing程式
4. 在程式中讀取HTML檔案並傳給setHTMLContent(String html)
5. 在事件中利用executeJavascript(String javascript)，來呼叫HTML內控制YouTube的JavaScript Function
6. 順利的話，開始放映:)
   

上面大部分的內容，在前一篇中有說明了，這裡把重心放在用Swing如何操控的部分...

為了讓Swing可以去操控它，在此準備了一個JLabel作為操控的媒介。

JLabel playYT = new JLabel("Play",JLabel.CENTER);<br />playYT.setFont(new Font("Dialog",Font.BOLD,16));<br />playYT.setForeground(Color.white);        <br />playYT.setBackground(Color.black);<br />playYT.setOpaque(true);<br />playYT.addMouseListener(this); <br /><br />

除此之外，當程式開始執行時，這時候因為YouTube還沒準備好，所以不能直接播放。如果直接在執行時就播放的話，它馬上告訴你沒有這個物件XD

要判斷YouTube是否準備完成，可以透過chromeless網頁內的這個JavaScript Function

function onYouTubePlayerReady(playerId) {<br />    ytplayer = document.getElementById("myytplayer");<br />    setInterval(updateytplayerInfo, 250);<br />    updateytplayerInfo();<br />    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");<br />    ytplayer.addEventListener("onError", "onPlayerError");<br /><br />    //已完成準備時送出通知<br />    sendCommand("already");<br />} <br />

透過它，在最後送出一個already的Command字串到sendCommand Function內。

這個sendCommand Function的主要作用就是將接收到的command寫到網址列

 function sendCommand(command){<br />    var s = 'command://' + encodeURIComponent(command);<br />    for(var i=1; i<arguments.length; s+='&'+encodeURIComponent(arguments[i++]));<br />    window.location = s;<br />};<br />

當command（這裡指的是already）被送出時，這時候JWebBrowser的網址列會接收到command://already

在JWebBrowser的WebBrowserListener事件中，有個方法就是用來接收command的

public void commandReceived(WebBrowserEvent arg0, String arg1, String[] arg2)

所以我們只要在這檢查一下是否有收到already就行了:)

webBrowser.addWebBrowserListener(new WebBrowserAdapter() {            <br />    @Override<br />    public void commandReceived(WebBrowserEvent arg0, String command, String[] arg2) {<br />        if(command.equals("already")){<br />            isReady = true;<br />        }<br />    }                <br />}); <br />

下面是使用chromeless內的JavaScript來播放YouTube的完整程式碼

import java.awt.BorderLayout;<br />import java.awt.Color;<br />import java.awt.Cursor;<br />import java.awt.Font;<br />import java.awt.event.MouseEvent;<br />import java.awt.event.MouseListener;<br />import java.io.BufferedReader;<br />import java.io.IOException;<br />import java.io.InputStreamReader;<br />import java.net.MalformedURLException;<br />import javax.swing.BorderFactory;<br />import javax.swing.JFrame;<br />import javax.swing.JLabel;<br />import javax.swing.SwingUtilities;<br /><br />import org.jdesktop.swingx.JXPanel;<br />import chrriis.dj.nativeswing.swtimpl.NativeInterface;<br />import chrriis.dj.nativeswing.swtimpl.components.JWebBrowser;<br />import chrriis.dj.nativeswing.swtimpl.components.WebBrowserAdapter;<br />import chrriis.dj.nativeswing.swtimpl.components.WebBrowserEvent;<br /><br /><br />public class YouTubeExample extends JXPanel implements MouseListener{<br /><br />    private JWebBrowser webBrowser;<br />    private String videoURL;<br />    private boolean isReady;<br />    public YouTubeExample(String videoURL) {<br />        this.videoURL = videoURL;        <br />        NativeInterface.open();<br /><br />        SwingUtilities.invokeLater(new Runnable() {<br />            public void run() {<br />                init();<br />            }<br />        });<br />    }<br /><br />    private void init() {        <br />        webBrowser = new JWebBrowser();        <br />        webBrowser.setAutoscrolls(false);<br />        webBrowser.setBarsVisible(false);<br />        webBrowser.setButtonBarVisible(false);<br />        webBrowser.setLocationBarVisible(false);<br />        webBrowser.setMenuBarVisible(false);<br />        webBrowser.setStatusBarVisible(false);<br />        webBrowser.setBorder(BorderFactory.createEmptyBorder(10,10,8,8));<br />        webBrowser.setBackground(Color.black);<br />        webBrowser.getNativeComponent().setBackground(Color.black);        <br />        webBrowser.setHTMLContent(generateHtmlPlayer());        <br />        webBrowser.addWebBrowserListener(new WebBrowserAdapter() {            <br />            @Override<br />            public void commandReceived(WebBrowserEvent arg0, String command, String[] arg2) {<br />                if(command.equals("already")){<br />                    isReady = true;<br />                }<br />            }                <br />        });<br />        <br />        setLayout(new BorderLayout());    <br />        add(webBrowser,BorderLayout.CENTER);    <br />        <br />        JLabel playYT = new JLabel("Play",JLabel.CENTER);<br />        playYT.setFont(new Font("Dialog",Font.BOLD,16));<br />        playYT.setForeground(Color.white);        <br />        playYT.setBackground(Color.black);<br />        playYT.setOpaque(true);<br />        playYT.addMouseListener(this);    <br />        add(playYT,BorderLayout.SOUTH);<br />    }<br />    <br />    <br />    private String generateHtmlPlayer() {<br />        StringBuilder html = new StringBuilder();<br />        try {<br />            BufferedReader l_reader=new BufferedReader(new<br />                    InputStreamReader(this.getClass().getResourceAsStream("test.html")));            <br />            while (l_reader.ready()) {<br />                html.append(l_reader.readLine()+"\n");<br />            }<br />        } catch (MalformedURLException e) {            <br />            e.printStackTrace();<br />        } catch (IOException e) {            <br />            e.printStackTrace();<br />        }<br />        return html.toString();<br />    }<br />    <br />    public static void main(String[] args) {    <br />        JFrame frame = new JFrame();<br />        frame.add(new YouTubeExample("u1zgFlCw8Aw"), BorderLayout.CENTER);<br />        frame.setResizable(false);        <br />        frame.setDefaultCloseOperation(3);<br />        frame.setSize(450, 380);<br />        frame.setLocationRelativeTo(frame);<br />        frame.setVisible(true);<br />    }<br /><br />    public void mouseClicked(MouseEvent e) {        <br />        if (isReady){<br />            webBrowser.executeJavascript("loadNewVideo(\""+YouTubeExample.this.videoURL+"\",0)");<br />        }        <br />    }<br /><br />    public void mouseEntered(MouseEvent e) {<br />        e.getComponent().setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));        <br />    }<br /><br />    public void mouseExited(MouseEvent e) {}<br />    public void mousePressed(MouseEvent e) {}<br />    public void mouseReleased(MouseEvent e) {}<br />    <br />}<br />

test.html(含JavaScript)