From 3f3b970b13538920918ecbfe9afbeed259676ff4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?iBug=20=E2=99=A6?= Date: Thu, 23 Jul 2020 03:42:46 +0800 Subject: [PATCH] Enhance Bilibili video support (redo of #2522) (#2599) * Enhance support for bilibili videos in responsive video helper, and add corresponding doc * Apply @iBug's review in mmistakes/minimal-mistakes#2522 * Fix danmaku in page hero video * Update video to use case..when for iframe src * Update CHANGELOG and history Co-authored-by: Anran <51769728+ALeafWolf@users.noreply.github.com> Co-authored-by: Michael Rose --- CHANGELOG.md | 1 + _includes/page__hero_video.html | 6 ++---- _includes/video | 31 ++++++++++++++++++++----------- docs/_docs/14-helpers.md | 25 +++++++++++++++++++++++++ docs/_docs/18-history.md | 3 ++- 5 files changed, 50 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2c320952424..7730eab4365c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Update link to wtfpl license in README. [#2571](https://github.com/mmistakes/minimal-mistakes/pull/2571) - Ignore teaser headline in table of contents when including posts list in another page. [#2558](https://github.com/mmistakes/minimal-mistakes/pull/2558) - Replace Font Awesome Kits with CSS from jsDelivr CDN. [#2583](https://github.com/mmistakes/minimal-mistakes/pull/2583) +- Add `danmaku` option to Bilibili video provider and add corresponding documentation/ [#2599](https://github.com/mmistakes/minimal-mistakes/pull/2599) ## [4.19.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.19.3) diff --git a/_includes/page__hero_video.html b/_includes/page__hero_video.html index 8586a95a2b15..a313a23d45b9 100644 --- a/_includes/page__hero_video.html +++ b/_includes/page__hero_video.html @@ -1,4 +1,2 @@ -{% capture video_id %}{{ page.header.video.id }}{% endcapture %} -{% capture video_provider %}{{ page.header.video.provider }}{% endcapture %} - -{% include video id=video_id provider=video_provider %} +{% assign video = page.header.video %} +{% include video id=video.id provider=video.provider danmaku=video.danmaku %} diff --git a/_includes/video b/_includes/video index 04b37e0d1c4b..d653fd641df6 100644 --- a/_includes/video +++ b/_includes/video @@ -1,15 +1,24 @@ {% capture video_id %}{{ include.id }}{% endcapture %} {% capture video_provider %}{{ include.provider }}{% endcapture %} +{% capture video_danmaku %}{{ include.danmaku | default: 0 }}{% endcapture %} + +{% capture video_src %} + {% case video_provider %} + {% when "vimeo" %} + https://player.vimeo.com/video/{{ video_id }}?dnt=true + {% when "youtube" %} + https://www.youtube-nocookie.com/embed/{{ video_id }} + {% when "google-drive" %} + https://drive.google.com/file/d/{{ video_id }}/preview + {% when "bilibili" %} + https://player.bilibili.com/player.html?bvid={{ video_id }}&page=1&as_wide=1&high_quality=1&danmaku={{ video_danmaku }} + {% endcase %} +{% endcapture %} +{% assign video_src = video_src | strip %} -
-{% if video_provider == "vimeo" %} - -{% elsif video_provider == "youtube" %} - -{% elsif video_provider == "google-drive" %} - -{% elsif video_provider == "bilibili" %} - -{% endif %} -
+{% unless video_src == "" %} +
+ +
+{% endunless %} diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md index 7002cd8c65f1..e7ff5a267352 100644 --- a/docs/_docs/14-helpers.md +++ b/docs/_docs/14-helpers.md @@ -179,6 +179,7 @@ Embed a video from YouTube, Vimeo, Google Drive, or bilibili that responsively s | ---------- | ------------ | ---------------------------------------------------------- | | `id` | **Required** | ID of the video | | `provider` | **Required** | Hosting provider of the video: `youtube`, `vimeo`, `google-drive`, or `bilibili` | +| `danmaku` | Optional | Bilibili only, [details below](#Bilibili) | ### YouTube @@ -240,6 +241,30 @@ header: provider: google-drive ``` +### Bilibili + +To embed the following Bilibili video at url `https://www.bilibili.com/video/BV1E7411e7hC` into a post or page's main content you'd use: + +```liquid +{% raw %}{% include video id="BV1E7411e7hC" provider="bilibili" %}{% endraw %} +``` + +If you want to enable danmaku (弹幕) for the embeded video, which is disabled by default, you can supply an additional parameter `danmaku="1"` as shown below: + +```liquid +{% raw %}{% include video id="BV1E7411e7hC" provider="bilibili" danmaku="1" %}{% endraw %} +``` + +To embed it as a video header you'd use the following YAML Front Matter: + +```yaml +header: + video: + id: BV1E7411e7hC + provider: bilibili + danmaku: 1 +``` + ## Table of contents Auto-generated table of contents list for your posts and pages can be enabled using two methods. diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md index 3f9b34ec3c79..866bb265bff5 100644 --- a/docs/_docs/18-history.md +++ b/docs/_docs/18-history.md @@ -5,7 +5,7 @@ permalink: /docs/history/ excerpt: "Change log of enhancements and bug fixes made to the theme." sidebar: nav: docs -last_modified_at: 2020-07-22T15:36:16-04:00 +last_modified_at: 2020-07-11T12:31:08+08:00 toc: false --- @@ -21,6 +21,7 @@ toc: false - Update link to wtfpl license in README. [#2571](https://github.com/mmistakes/minimal-mistakes/pull/2571) - Ignore teaser headline in table of contents when including posts list in another page. [#2558](https://github.com/mmistakes/minimal-mistakes/pull/2558) - Replace Font Awesome Kits with CSS from jsDelivr CDN. [#2583](https://github.com/mmistakes/minimal-mistakes/pull/2583) +- Add `danmaku` option to Bilibili video provider and add corresponding documentation/ [#2599](https://github.com/mmistakes/minimal-mistakes/pull/2599) ## [4.19.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.19.3)