在现代的网页应用程序中，视频播放器是不可或缺的一部分。为了让用户有更好的体验，我们需要为视频播放器提供一个漂亮的界面。在本文中，我们将介绍如何使用 Material Design Lite 和 Polymer 来创建一个漂亮的视频播放器 UI。
Material Design Lite 简介
Material Design Lite 是一个基于 Google Material Design 概念的前端框架，它提供了一套基于 HTML、CSS 和 JavaScript 的组件库，让我们可以轻松地创建漂亮的界面。
在本文中，我们将使用 Material Design Lite 提供的组件来创建我们的视频播放器界面。
Polymer 简介
Polymer 是一个开源的 JavaScript 库，它提供了一种基于 Web 组件的方法来构建 Web 应用程序。通过使用 Polymer，我们可以创建可重用的 Web 组件，这些组件可以在不同的应用程序中使用，从而提高代码的可维护性和可重用性。
在本文中，我们将使用 Polymer 来创建我们的视频播放器组件。
创建视频播放器 UI
首先，我们需要在我们的 HTML 文件中引入 Material Design Lite 和 Polymer 库。可以通过以下代码来实现：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CWebComponents"></script> <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/bundles/webcomponents-ce.js"></script>
接下来，我们需要创建一个包含视频播放器的容器元素。可以通过以下代码来实现：
<div id="player-container"> <video id="player" controls></video> </div>
在上面的代码中，我们创建了一个 id 为 "player-container" 的 div 元素，其中包含一个 id 为 "player" 的 video 元素。video 元素带有 controls 属性，这将为我们提供默认的视频控制器。
接下来，我们将使用 Polymer 来创建一个自定义的 video-player 元素，并将其添加到我们的页面中。
<link rel="import" href="video-player.html"> <video-player src="example.mp4"></video-player>
在上面的代码中，我们引入了一个名为 "video-player.html" 的文件，该文件包含了我们的自定义视频播放器组件。我们还创建了一个名为 "video-player" 的元素，并为其设置了一个名为 "src" 的属性，该属性将指定要播放的视频文件。
现在，我们需要创建 "video-player.html" 文件，并在其中定义我们的自定义视频播放器组件。可以通过以下代码来实现：
-- -------------------- ---- -------
----- ------------ ----------------------------------------------------------------------------
----- ------------ ----------------------------------------------------------------------------------------
----- ------------ --------------------------------------------------------------------------------
----- ------------ --------------------------------------------------------------------------------
----- ------------ ------------------------------------------------------------------------------------------
----------- ------------------
----------
-------
----- -
-------- ------
------ -----
------- --
--------------- -------
--------- ---------
--------- -------
-
------ -
--------- ---------
---- --
----- --
------ -----
------- -----
----------- --------
----------------- ------
-
--------- -
--------- ---------
------- --
----- --
------ -----
----------------- ------- -- -- -----
------ ------
-------- -----
---------------- --------------
------------ -------
-------- ----
----------- -----------
-
--------- ------------ -
------ ----
-
--------
------ ---------- ------------- -----------------
---- --------------
------------------ ----------------- -------------------------------------
------------------ ------------ --------------------------------------
------------- ----------- ------- ------------------- ------------------------ ---------------------------------
----------------------------------- - ---------------------------------
------------- ------ ------------------------------------------------
------
-----------
--------
----- ----------- ------- --------------- -
------ --- ---- - ------ --------------- -
------ --- ------------ -
------ -
---- -------
------------- -
----- -------
------ -
--
---------- -
----- -------
------ -
-
--
-
------- -
--------------
----------- - ----------------------------------------
------------ - -----------------------------------------
---------------------------------------------- -- -- -
-------------- - ---------------------
---
------------------------------------------ -- -- -
----------------- - ------------------------
---
------------------------------------------------------- -- -- -
----------------------- - ----------------------------
---
--------------------------------------- -- -- -
----------------------- - -------------------
---
-
------- -
-------------------
-
-------- -
--------------------
-
------- -
----------------------- - -------------------
-
------------- -
-- ------------------------------- -
--------------------------------
- ---- -- --------------------------------- -
----------------------------------
- ---- -- ---------------------------------- -
-----------------------------------
- ---- -- ------------------------------------- -
--------------------------------------
-
-
----------------- -
----- ------- - --------------- - ----
----- ------- - --------------- - ----
------ -------------------------------------------- -------
-
-
------------------------------------- -------------
---------
-------------在上面的代码中，我们定义了一个名为 "video-player" 的自定义元素，并在其中使用了 Material Design Lite 和 Polymer 提供的组件。我们还定义了一些属性和方法，这些属性和方法将用于控制视频播放器的行为。
结论
在本文中，我们使用 Material Design Lite 和 Polymer 来创建了一个漂亮的视频播放器界面。通过使用这些工具，我们可以轻松地创建出具有高度可维护性和可重用性的 Web 组件。
希望这篇文章能够帮助你更好地理解如何使用 Material Design Lite 和 Polymer 来创建漂亮的 UI，并且能够为你的下一个项目提供一些有用的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6762ab7b856ee0c1d4086235