close

如何使用 JW Player： 嵌入和配置视频

什么是 JW Player？

JW Player 是一款功能强大且灵活的工具，可用于在您的网站上播放视频。本指南将详细介绍如何使用它，包括如何使用 CDN 或通过下载获取视频库。

如何获取 JW Player 库

您有两种方式获取 JW Player 库： 使用 CDN 或下载到本地托管。

1. 使用 CDN（推荐）

使用 CDN（内容分发网络）是集成 JW Player 最简单、最快捷的方式。CDN 有助于更快地加载文件，因为它们托管在全球各地的多台服务器上。

要使用 CDN，只需将以下代码行添加到<head>您网站的相应部分即可。注意： 您需要将其替换<YOUR_LICENSE_KEY>为您的实际许可证密钥。

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. 本地下载和托管

如果您想要完全控制文件并且不想依赖网络连接，您可以下载 JW Player 并将其托管在您自己的服务器上。

  1. 前往 JW Player 官方网站。

  2. 注册或登录您的帐户（可免费试用）。

  3. 从您的帐户仪表板查找并下载该库。

  4. 解压缩文件并将文件夹上传到您的服务器。

JW Player 使用详细指南

一旦您有了这个库，您就可以开始将 JW Player 嵌入到您的网站中。

1. 创建 HTML 文件并嵌入 JW Player

以下是完整的 HTML 示例。如果您使用 CDN，请将<script src="...">以下代码替换为上述 CDN 代码。如果您使用下载的库，请确保文件路径jwplayer.js正确。

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. 代码详解

  • <script src="...">： 此行将 JW Player 库链接到您的网站。

  • <div id="video-container"></div>： 这是视频显示的位置。您可以随意输入id，但请确保它与函数中使用的名称一致jwplayer()。

  • jwplayer("video-container").setup({...})： 这是您初始化和配置 JW Player 的地方。

    • "file"： 视频文件的路径。

    • "image"： 视频缩略图的路径。

    • "width"和"height"： 设置播放器的尺寸。您也可以将其用于"100%"响应式播放器。

    • "autostart" true： 如果希望视频自动播放， 请设置为。

    • "controls"： false如果您想隐藏播放器控件，请设置为。

通过这份详细的指南，您可以轻松开始使用 JW Player 在您的网站上显示视频。