简介
在前端开发中，视频播放器已经成为一个必不可少的组件。而在视频广告盈利比例不断提高的今天，视频广告功能也愈发重要。plyr-ads 是一个基于 plyr 的 npm 包，它提供了简单易用的广告插件，可以方便的实现视频广告的播放。
安装
在使用 plyr-ads 之前，我们需要先安装 plyr。
npm install plyr --save
接下来，安装 plyr-ads。
npm install plyr-ads --save
使用
使用 plyr 和 plyr-ads 的基本步骤如下：
- 引入 JavaScript 和 CSS 文件
-- -------------------- ---- ------- ---- ------ ---- ---- --- --- ----- ---------------- --------------------------------------- ---- ------ -------- ---- --- --- ----- ---------------- ----------------------------------------------- ---- ------ ------ --- --- ------ --- ------- ---------------------------------------------- ------- ------------------------------------------------------
- 创建一个 video 元素
<video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>- 初始化 plyr 和 plyr-ads
-- -------------------- ---- -------
-- ------ ----- ------ --------
----- ------ - --- ------------- -
-- -------
---
-- ------ --- --------
----- --- - --- ---------------- -
-- -------
---
-- ----- --- ------
-----------广告选项
在 plyr-ads 中，有很多可选的广告选项。以下是 plyr-ads 的广告选项的详细说明。
- enabled：默认为 false，设置为 true 后启用广告插件。
- inAdBreak：在广告播放器内部启用贴片广告。
- tagUrl：媒体播放器要使用的 VAST 标记 URL。
- disableClickThrough：是否禁用广告位的光标点击链接。默认情况下是允许的，但这可能会与播放器外部链接冲突。
- maxAds：播放器加载的最大广告数量。默认为 0（没有限制）
- maxAdDuration：允许单个广告持续的最长时间（以秒为单位）。默认为 15 秒。
- adLabelTag：广告区域 div 的标签类型。默认为 .
- adLabel：广告区域 div 的标签内容。默认为 “Advertisement”。
- clickThroughUrl：光标点击链接目标 URL。
示例代码
以下是一个简单的示例代码，演示了如何使用 plyr-ads 使用视频广告。
HTML 代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ----- ---------------
---- ------ ---- ---- --- ---
----- ---------------- ---------------------------------------
---- ------ -------- ---- --- ---
----- ---------------- -----------------------------------------------
---- ------ ------ --- --- ------ ---
------- ----------------------------------------------
------- ------------------------------------------------------
-------
------
------ ----------------------------------------------------------------------------- ---------
------- ---------------------------------------------------------------------------- -----------------
--------
--------
----- ------ - --- ------------- -
-- --- - ----- ------
------- --
---
----- --- - --- ---------------- -
-------- -----
------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------- ---
---------- ----
---
-----------
---------
-------
-------这个示例会输出一个网页，页面中包括一个视频播放器和一个 15 秒的贴片广告。如果要增加其他广告选项，可以在初始化 ads 插件时设置。
结论
plyr-ads 是一个使用简单，易于集成的 jQuery 插件，非常适合用于嵌入式广告实现。同时，它也提供了很多广告选项，使我们可以轻松地控制广告的显示和行为。远程下载的视频广告质量无法控制，如果您想从头开始创建完全定制的广告体验，可以考虑使用更高级的工具（如 Google Ad Manager）。总的来说，plyr-ads 是一个非常好的 npm 包，可以方便地对视频广告进行管理和控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc1b