Java媒体播放器:基于Web浏览器的方法

556 阅读5分钟

使用Web浏览器功能构建JavaMediaPlayer的简单方法。

如果需要将媒体播放器嵌入到Java桌面应用程序中,有几个选项可供选择:

  • 您可以使用JavaFX媒体API实现所有所需的媒体播放器功能
  • 有点过时,但仍能使用Java媒体框架可能是个解决办法。
  • 您可以集成第三方Java库,如VLCJ它封装了本地媒体播放器的功能。

它们各有优缺点:

JavaFXMediaAPI方法是跨平台的,可以在Windows、Linux和MacOS上使用。它适用于JavaFX。但是,如果使用Swing或SWT,则需要桥接器,如JFXPanel和FXCanvas

包装本地媒体播放器的功能需要为每个平台提供一个单独的程序集,因为播放机可能根本不支持所有所需的平台。例如,VLCJ不支持Linux。此外,您可能需要在目标平台上安装丢失的视频和音频编解码器来播放各种媒体格式。

使用Web浏览器功能

现在,我们通过网络浏览器来消费大部分的媒体内容。它们在多个平台上工作,可以播放各种音频和视频格式。此外,它们还具有播放媒体内容的所有必要功能。为什么不使用Web浏览器的功能在Java桌面应用程序中播放媒体内容呢?

在本文中,我将描述另一种构建跨平台Java媒体播放器的方法,您可以在Java Swing、JavaFX或SWT应用程序中使用它。我要:

  1. 使用以下方法将Web浏览器控件集成到简单的JavaSwing应用程序中JxBrowser
  2. 加载HTML网页,该网页将使用HTML 5功能播放所需的视频。
  3. 通过直接从Java代码调用的JavaScript命令来控制回放。

JxBrowser是一个商业Java库,它允许您在跨平台的Java Swing、JavaFX和SWT应用程序中利用铬的强大功能。它最适合开发和销售基于Java技术的软件解决方案的公司。

JxBrowser是一个商业Java库,它允许您在跨平台的Java Swing、JavaFX和SWT应用程序中利用铬的强大功能。它最适合开发和销售基于Java技术的软件解决方案的公司。

在过去,我们习惯于Flash播放器在网页上呈现各种媒体内容。很受欢迎,但是到了生命的尽头2020年12月。目前,它已完全被HTML 5视频和音频API

使用API播放媒体内容有两种方法:

  1. 直接使用HTML 5视频和音频API。
  2. 使用第三方JavaScript库,如普雷,Video.js等

在本文中,我使用的是Plyr库--最流行的HTML 5媒体播放器之一。它非常简单,易于集成。

学习资料点击获取学习资料

实施

让我们创建一个演示程序,演示如何使用PlyrJS库和JxBrowser构建跨平台Java媒体播放器。

首先,我们需要创建一个HTML页面(media.html),其中包括JS库、嵌入视频播放器和配置目标MP4视频文件的位置:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Java Media Player</title>
  <link rel="stylesheet" href="<https://cdn.plyr.io/3.6.8/plyr.css>"/>
</head>
<body style="margin:0">

<video id="player"
       controls
       crossorigin
       playsinline
       data-poster="<https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg>">
  <source src="<https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4>"
          type="video/mp4"/>
</video>

<script src="<https://cdn.plyr.io/3.6.8/plyr.js>" crossorigin="anonymous"></script>
</body>
</html>

接下来,我们需要创建一个简单的JavaSwing应用程序,该应用程序显示JFrame使用Web浏览器和播放控件:


JFrame frame = new JFrame("Java Media Player");
frame.add(new MediaPlayer(), BorderLayout.CENTER);
frame.setVisible(true);

这个MediaPlayer组件包含web浏览器和播放控件。它具有以下初始化逻辑:

        EngineOptions.newBuilder(HARDWARE_ACCELERATED)
                // In this demo we load MP4 video file, so we have
                // to enable the corresponding proprietary features
                // that are disabled by default.
                .enableProprietaryFeature(ProprietaryFeature.H_264)
                .enableProprietaryFeature(ProprietaryFeature.AAC)
                // Enable the possibility to play video 
                // programmatically from JavaScript without user
                // interaction on a web page.
                .enableAutoplay()
                .build());
Browser browser = engine.newBrowser();

// Inject an instance of JsPlayer into JavaScript to call
// its methods from JavaScript to inform about player events.
browser.set(InjectJsCallback.class, params -> {
    Frame frame = params.frame();
    JsObject window = frame.executeJavaScript("window");
    if (window != null) {
        player = new JsPlayer(frame);
        window.putProperty("java", player);
    }
    return Response.proceed();
});

// Get absolute path to the media.html file with the JS video 
// player, load it and wait until the file is loaded completely, so 
// we can build the player UI controls.
URL resource = MediaPlayer.class.getResource("/media.html");
if (resource != null) {
    browser.navigation().loadUrlAndWait(resource.toString());
}

// Create a visual Swing control that will display content of
// the web page with video.
BrowserView view = BrowserView.newInstance(browser);
view.setPreferredSize(new Dimension(1280, 720));

// Embed the control into Java Swing Frame.
setLayout(new BorderLayout());
add(view, BorderLayout.CENTER);
add(playbackControls(), BorderLayout.SOUTH);

让我解释一下我在这个初始化逻辑中所做的事情。在上面的代码中,我配置了Engine实例,相当于Google Chrome应用程序,有几个选项:

  • 使H 264和AAC专有功能能够播放MP4视频;
  • 启用不需要用户在网页上交互的情况下从JavaScript以编程方式播放视频的可能性。

然后我创建一个Browser实例,等效于Chrome选项卡,并加载media.html档案。为了显示HTML文件的内容,我创建了一个SwingBrowserView控件并将其嵌入到Java框架中。

在演示应用程序中,我决定使用以下媒体播放器功能:

  • 播放和停顿;
  • 哑巴和哑巴;
  • 变化量;
  • 获取视频的持续时间(以秒为单位);
  • 在更改当前播放时间时获取通知;
  • 设定当前播放时间;

对于所描述的每一种播放功能,我都会创建相应的JavaSwing GUI控件,以便最终播放面板具有以下外观

现在,我需要将这些控件与JS媒体播放器的相应功能绑定起来。例如,当我单击按钮,我需要调用player.play()JS函数为此,我使用相应的JxBrowser API:

frame.executeJavaScript("player.play()");

若要在播放更改后从JavaScript获得通知,我需要使用标记为@JsAccessible注释如下:

public final class JsPlayer {
    @JsAccessible
    public void onTimeUpdated(double currentTime) {
        listeners.forEach(listener -> listener.accept(currentTime));
    }
}

让我们还创建这个类的一个实例,并使用以下JxBrowser API将其注入JavaScript:

browser.set(InjectJsCallback.class, params -> {
    Frame frame = params.frame();
    JsObject window = frame.executeJavaScript("window");
    if (window != null) {
        player = new JsPlayer(frame);
        window.putProperty("java", player);
    }
    return Response.proceed();
});

带注释的方法@JsAccessible对于JavaScript来说是“可见的”,并且可以在触发了相应的事件时调用。

media.html文件,我需要添加JavaScript代码,它将通知Java侧不同的回放事件:

<script>
  player.on('timeupdate', event => {
    java.onTimeUpdated(player.currentTime);
  });
  player.on('volumechange', event => {
    java.onVolumeChanged(player.volume, player.muted);
  });
  player.on('play', event => { java.onPlaybackStarted(); });
  player.on('pause', event => { java.onPlaybackPaused(); });
</script>

结果

JxBrowser是跨平台的,所以这种方法可以在所有平台上工作,而不需要您的额外努力。

HTML 5视频功能足以构建一个自定义媒体播放器,以在各种平台上播放大多数流行的视频和音频格式。

希望本文中描述的方法将对您有所帮助。期待您的意见和建议。

小伙伴们如果觉得我写的不错请点赞加关注!!! 完整资料已经给大家打包完毕,需要的小伙伴可以点击获取学习资料!!!