Giter VIP home page Giter VIP logo

hugo-video's Introduction

hugo-video

About

This Hugo theme component provides a shortcode: video for embedding videos using the HTML video element.

It comes with english, french, german, russian, japanese, korean and polish localization. Other languages welcome! Send your pull request.

Features

This shortcode uses Hugo Page Resources. The video to display must be placed in the page bundle.

The shortcode takes one mandatory argument: the filename of the video file to display, without the extension. It detects automatically if several versions of the file exists in the page bundle, and add accordingly the multiple src tags. When an image file with the same filename is also present in the page bundle, it is automatically used as a poster frame.

When the browser doesn't support the HTML video element, the shortcode displays a localized notice allowing the video download for local playing.

Following video formats are supported:

  • MP4 (extension .mp4 or .m4v)
  • WebM, (extension .webm)
  • Ogg, (extension .ogv)

Default values:

  • Browser's default controls are displayed (controls attribute is always included)
  • Video can be preloaded (preload="auto" attribute is always included)
  • Video width is 100% (width="100%" attribute is included); this can be changed by indicating the desired width when calling the shortcode, see example below)
  • Video height attribute is not set by default, but can be explicitly set by indicating the desired height in pixels (i.e. height="640"); credit goes to Evgeny Kuznetsov for this feature
  • Following other video attributes can be set: muted="true", autoplay="true" and loop="true". Credit goes to Tom McKenzie for this feature
  • Default settings are used for other video attributes

When no video file of the given name is found in the supported format (see above), the shortcode intentionally fails with a No valid video file with filename <filename> found. error.

Usage

  1. Add the hugo-video as a submodule to be able to get upstream changes later
    git submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video
  2. Add hugo-video as the left-most element of the theme list variable in your site's or theme's configuration file config.yaml or config.toml. Example, with config.yaml:
    theme: ["hugo-video", "my-theme"]
    or, with config.toml,
    theme = ["hugo-video", "my-theme"]
  3. Place your video file(s) in the page bundle of your post.
  4. In your site, use the shortcode, this way, indicating the video filename without its extension. If your video file is my-beautiful-screencast.mp4, type this:
    {{< video src="my-beautiful-screencast" >}}
    or
    {{< video src="my-beautiful-screencast" width="600px" >}}

Thanks

Licence

Copyright © 2019 onwards, Nicolas Martignoni [email protected].

All the source code is licensed under GPL 3 or any later version

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

hugo-video's People

Contributors

ahandsel avatar ark0f avatar cmahnke avatar cnaa97 avatar grrowl avatar martignoni avatar nekr0z avatar olafhaag avatar plett avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

hugo-video's Issues

Where video files must be?

Hello Martignoni,

Maybe it is a silly question. I'm using Hugo for a few days, and I've installed the plugin that you have made.

I tried to put a video inside public/images, public/media, static/media, and variations, and I always have the same result:

Building sites... ERROR 2020/04/12 23:55:40 No file with filename "media/conan_1" found.

At content/posts/my-post.md I put:
{{< video src="media/conan_1" loop="true" >}}

The file name is conan_1.mp4 (Conan is related to conan.io)

How is the correct way to assign videos? Could you help me?

Thank you for the plugin.

.MediaType.Suffixes returns empty array for m4v when site is deployed to GitLab

When I built my site locally, everything worked as expected. Now I pushed the site to gitlab pages and the build failed. I traced it down to .MediaType.Suffixes returning [].
The file in question is a m4v video file.

{{ if or (in .MediaType.Suffixes "mp4") (in .MediaType.Suffixes "m4v") }}

The page resource is found though. It just can't determine the extension.
I'll look for a solution.

Could not use http link in video.

I want use an video i have upload on my web server, now i have a link like this: https://xxxxx.com/xxxx.webm
When i trying to add this link in my page:

{{< video src="https://xxxxx.com/xxxx.webm" type="video/webm" preload="auto" >}}

I get some error:

Building sites … ERROR 2021/05/08 21:42:36 No file with filename "https://xxxxx.com/xxxx.webm" found.

It looks like i can't use http link.

Use `static` as source for videos?

Thanks for the theme, love to include videos before I can put them on youtube.
Only think is that I would like to put the videos into static/ next to the content folder so that I separate the static content from the actual markdown content.

From #9 I figure that I can not use a path like /movies/my-video.mp4 where movies is placed in static?

Shortcode breaks when file not found

Steps to reproduce and actual result

  1. Call the shortcode with {{< video src="video" >}} with no video file of this name in the bundle
  2. Observe that a shortcode breaks badly, though a correct error message is displayed.

Expected result

An error with adequate message is displayed with no other error.

File with unsupported extension displays a video with no content

Steps to reproduce and actual result

  1. Copy single file dummyvideo.txt(not a real video) in the bundle of the post. Do not place any other ressource file in the bundle (other that index.md).
  2. Call the shortcode with {{< video src="dummyvideo" >}}.
  3. Observe that a shortcode breaks badly.

Expected result

No video is displayed or, alternatively, an error with adequate message is displayed.

Video extension m4v is not supported

Hi! I tried using this shortcode, but I get following runtime error when linking to an unsupported video, I guess (m4v).

failed to render shortcode "video": failed to process shortcode: "D:\website\themes\hugo-video\layouts\shortcodes\video.html:55:8": execute of template failed: template: shortcodes/video.html:55:8: executing "shortcodes/video.html" at <i18n "videoUnsupported" $video_dl>: error calling i18n: runtime error: index out of range [0] with length 0

Page Bundle

Hello.

Where do I save my .mp4 videos? Also, could you explain exactly what a page bundle is?

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.