video.js support

[megapro17]

This player is looking much better than html5 stock, and has a lot of features https://videojs.com/ There is a theme with it, but I couldn't make additional module from it https://github.com/laozhu/hugo-nuo

[martignoni]

Thanks for your feedback. I know videojs, but it's out of scope of this project, intended to support video without additional code.

[megapro17]

Can you explain me how to create my own theme component? There is no much documentation in the web. https://gohugo.io/hugo-modules/theme-components/ I'm creating shortcut like this, but there I shouldn't include css and js file each time it's used, there is .HasShortcode option, but it only works in templates, but when i'm trying to use template it just overrides theme completely.

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />  

<video id="player" playsinline controls>
    <source src="{{ .Get 0 }}" type="video/mp4" />
</video>

<script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
<script>const players = Plyr.setup('.js-player');
</script>

I switched to plyr because it's looking nicer, there is one theme that uses it https://github.com/funkydan2/alpha-church/, i see js included in layouts/partials/scripts.html and css in layouts/partials/header.html

[megapro17]

oh never mind, i figured it out

{{ if not (.Page.Scratch.Get "plyrLoaded") }}
    {{ .Page.Scratch.Set "plyrLoaded" true }}
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />  
    <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>

    <script>
        window.onload = function() {
            const players = Plyr.setup('#player');
        };
      </script>
{{ end }}

<video id="player" playsinline controls>
    <source src="{{ .Get 0 }}" type="video/mp4" />
</video>