Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for embed video files #1558

Merged
merged 1 commit into from
Feb 27, 2024

Conversation

kungfux
Copy link
Collaborator

@kungfux kungfux commented Feb 24, 2024

Type of change

  • New feature (non-breaking change which adds functionality)

Description

I want to embed a video file hosted on my own blog, CDN, or publicly available without a video platform using the HTML 5 <video> element.

Implementation

Here are examples on how you can include video file with respect to img_cdn and img_path variables.

{% include embed/video.html
src='https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a7/How_to_make_video.webm/How_to_make_video.webm.720p.vp9.webm'
autoplay=true
loop=true
muted=true
title='How to make video' %}

{% include embed/video.html src='demo.mp4' autoplay=true loop=true title='Demo video' %}

Arguments:

  • src - required, path to a file
  • poster='/path/to/poster.png' - optional, poster image for a video that is shown while video is downloading
  • title='Text' - optional, title for a video that appears below the video and looks same as for images
  • autoplay=true - optional, video automatically begins to play back as soon as it can
  • loop=true - optional, automatically seek back to the start upon reaching the end of the video
  • muted=true - optional, audio will be initially silenced

Demo

image
Note: 2nd and 3rd videos are added using new functionality.

@kungfux kungfux marked this pull request as draft February 25, 2024 00:47
@kungfux kungfux force-pushed the feature/embed-video-file branch 2 times, most recently from 745f992 to 4c99326 Compare February 25, 2024 18:33
@kungfux kungfux marked this pull request as ready for review February 25, 2024 18:33
_sass/addon/commons.scss Outdated Show resolved Hide resolved
_includes/embed/video.html Outdated Show resolved Hide resolved
@cotes2020 cotes2020 changed the title feat: embed video file feat: support for embed video files Feb 27, 2024
Copy link
Owner

@cotes2020 cotes2020 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A blank line before the if condition makes it easier to read.

_includes/embed/video.html Outdated Show resolved Hide resolved
_includes/embed/video.html Outdated Show resolved Hide resolved
_includes/embed/video.html Outdated Show resolved Hide resolved
@cotes2020 cotes2020 changed the title feat: support for embed video files feat: add support for embed video files Feb 27, 2024
@cotes2020
Copy link
Owner

@kungfux when you've added on the blank lines suggested above, try merging into the master branch on your own :)

@kungfux
Copy link
Collaborator Author

kungfux commented Feb 27, 2024

@kungfux when you've added on the blank lines suggested above, try merging into the master branch on your own :)

Am I correct that Codacy Static Code Analysis errors can be ignored and 2019-08-08-write-a-new-post.md file is subject to inspection only because it was touched and so will not cause similar problems for future PRs?

@cotes2020
Copy link
Owner

Am I correct that Codacy Static Code Analysis errors can be ignored and 2019-08-08-write-a-new-post.md file is subject to inspection only because it was touched and so will not cause similar problems for future PRs?

That's the markdown line length limit detection, in reality most markdown lines will be more than 80 characters, so yes, you can ignore these warnings.

@kungfux kungfux merged commit 9592146 into cotes2020:master Feb 27, 2024
5 of 6 checks passed
@kungfux
Copy link
Collaborator Author

kungfux commented Feb 27, 2024

@kungfux when you've added on the blank lines suggested above, try merging into the master branch on your own :)

Roger that :)

@kungfux kungfux deleted the feature/embed-video-file branch February 27, 2024 20:54
github-actions bot pushed a commit that referenced this pull request May 11, 2024
## [7.0.0](v6.5.5...v7.0.0) (2024-05-11)

### ⚠ BREAKING CHANGES

* optimize the resource hints (#1717)
* rename media-url file and related parameters (#1651)
* rename comment setting parameter (#1563)
* **analytics:** add post pageviews for GoatCounter (#1543)

### Features

* add cloudflare web analytics ([#1723](#1723)) ([c17fba4](c17fba4))
* add support for embed video files ([#1558](#1558)) ([9592146](9592146))
* add support for giscus strict title matching ([#1614](#1614)) ([700fd5b](700fd5b))
* **analytics:** add post pageviews for GoatCounter ([#1543](#1543)) ([b641b3f](b641b3f))
* **analytics:** add Umami and Matomo tracking codes ([#1658](#1658)) ([61bdca2](61bdca2))
* change site verification settings ([#1561](#1561)) ([e436387](e436387))
* **deps:** move `MathJax` configuration to a separate file ([#1670](#1670)) ([44f552c](44f552c))
* display theme version in footer ([#1611](#1611)) ([8349314](8349314))
* **i18n:** allow `page.lang` to override `site.lang` ([#1586](#1586)) ([547b95c](547b95c))
* make post description customizable ([#1602](#1602)) ([f865336](f865336))
* **media:** support audio and video tag with multi sources ([#1618](#1618)) ([23be416](23be416))

### Bug Fixes

* make TOC title and entries visible at the same time ([#1711](#1711)) ([e0950fc](e0950fc))
* mode toggle not outlined when receiving keyboard focus ([#1690](#1690)) ([cd37f63](cd37f63))
* prevent footnote back arrow from becoming an emoji ([#1716](#1716)) ([8608147](8608147))
* **pwa:** skip range requests in service worker ([#1672](#1672)) ([76d58fe](76d58fe))
* search result prompt is empty ([#1583](#1583)) ([8a2afae](8a2afae))
* use `https` for Weibo sharing URL ([#1612](#1612)) ([8e5fbb7](8e5fbb7))

### Improvements

* improve <hr> visibility in dark mode ([#1565](#1565)) ([4ddd5c4](4ddd5c4))
* lean bootstrap javascript ([#1734](#1734)) ([ddb48ed](ddb48ed))
* rename comment setting parameter ([#1563](#1563)) ([f8390d4](f8390d4))
* replace jQuery with Vanilla JS ([#1681](#1681)) ([fe7afa3](fe7afa3))
* simplify mode toggle script ([#1692](#1692)) ([d4a6d64](d4a6d64))
* tree shaking Bootstrap CSS ([#1736](#1736)) ([363a3d9](363a3d9))

### Changes

* optimize the resource hints ([#1717](#1717)) ([dcb0add](dcb0add))
* rename media-url file and related parameters ([#1651](#1651)) ([9f8aeaa](9f8aeaa))
Copy link

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

kimbob13 pushed a commit to kimbob13/kimbob13.github.io that referenced this pull request May 25, 2024
kimbob13 pushed a commit to kimbob13/kimbob13.github.io that referenced this pull request May 25, 2024
## [7.0.0](cotes2020/jekyll-theme-chirpy@v6.5.5...v7.0.0) (2024-05-11)

### ⚠ BREAKING CHANGES

* optimize the resource hints (cotes2020#1717)
* rename media-url file and related parameters (cotes2020#1651)
* rename comment setting parameter (cotes2020#1563)
* **analytics:** add post pageviews for GoatCounter (cotes2020#1543)

### Features

* add cloudflare web analytics ([cotes2020#1723](cotes2020#1723)) ([c17fba4](cotes2020@c17fba4))
* add support for embed video files ([cotes2020#1558](cotes2020#1558)) ([9592146](cotes2020@9592146))
* add support for giscus strict title matching ([cotes2020#1614](cotes2020#1614)) ([700fd5b](cotes2020@700fd5b))
* **analytics:** add post pageviews for GoatCounter ([cotes2020#1543](cotes2020#1543)) ([b641b3f](cotes2020@b641b3f))
* **analytics:** add Umami and Matomo tracking codes ([cotes2020#1658](cotes2020#1658)) ([61bdca2](cotes2020@61bdca2))
* change site verification settings ([cotes2020#1561](cotes2020#1561)) ([e436387](cotes2020@e436387))
* **deps:** move `MathJax` configuration to a separate file ([cotes2020#1670](cotes2020#1670)) ([44f552c](cotes2020@44f552c))
* display theme version in footer ([cotes2020#1611](cotes2020#1611)) ([8349314](cotes2020@8349314))
* **i18n:** allow `page.lang` to override `site.lang` ([cotes2020#1586](cotes2020#1586)) ([547b95c](cotes2020@547b95c))
* make post description customizable ([cotes2020#1602](cotes2020#1602)) ([f865336](cotes2020@f865336))
* **media:** support audio and video tag with multi sources ([cotes2020#1618](cotes2020#1618)) ([23be416](cotes2020@23be416))

### Bug Fixes

* make TOC title and entries visible at the same time ([cotes2020#1711](cotes2020#1711)) ([e0950fc](cotes2020@e0950fc))
* mode toggle not outlined when receiving keyboard focus ([cotes2020#1690](cotes2020#1690)) ([cd37f63](cotes2020@cd37f63))
* prevent footnote back arrow from becoming an emoji ([cotes2020#1716](cotes2020#1716)) ([8608147](cotes2020@8608147))
* **pwa:** skip range requests in service worker ([cotes2020#1672](cotes2020#1672)) ([76d58fe](cotes2020@76d58fe))
* search result prompt is empty ([cotes2020#1583](cotes2020#1583)) ([8a2afae](cotes2020@8a2afae))
* use `https` for Weibo sharing URL ([cotes2020#1612](cotes2020#1612)) ([8e5fbb7](cotes2020@8e5fbb7))

### Improvements

* improve <hr> visibility in dark mode ([cotes2020#1565](cotes2020#1565)) ([4ddd5c4](cotes2020@4ddd5c4))
* lean bootstrap javascript ([cotes2020#1734](cotes2020#1734)) ([ddb48ed](cotes2020@ddb48ed))
* rename comment setting parameter ([cotes2020#1563](cotes2020#1563)) ([f8390d4](cotes2020@f8390d4))
* replace jQuery with Vanilla JS ([cotes2020#1681](cotes2020#1681)) ([fe7afa3](cotes2020@fe7afa3))
* simplify mode toggle script ([cotes2020#1692](cotes2020#1692)) ([d4a6d64](cotes2020@d4a6d64))
* tree shaking Bootstrap CSS ([cotes2020#1736](cotes2020#1736)) ([363a3d9](cotes2020@363a3d9))

### Changes

* optimize the resource hints ([cotes2020#1717](cotes2020#1717)) ([dcb0add](cotes2020@dcb0add))
* rename media-url file and related parameters ([cotes2020#1651](cotes2020#1651)) ([9f8aeaa](cotes2020@9f8aeaa))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants