search

ppoffice / hexo-theme-hueman

A redesign of Alx's wordpress theme Hueman, ported to Hexo.
http://ppoffice.github.io/hexo-theme-hueman/
GNU General Public License v2.0
1.17k stars 335 forks source link

HTML5 Video support #255

Closed eldruin closed 5 years ago

eldruin commented 5 years ago

Hi, Are HTML5 videos (MP4/mov/webm,...) supported in the gallery? The lightgallery plugin seems to support them but I cannot get them to work. Would it be necessary to add videojs? Adding raw HTML to the markdown files would be fine for me. Thank you for this great theme!

ppoffice commented 5 years ago

@eldruin You may try https://hexo.io/docs/tag-plugins#Raw

eldruin commented 5 years ago

Thank you for your answer. Adding HTML5 tags <video>...</video> works just fine and the video plays correctly so I did not need {% raw %} so far. However, the video then does not integrate into the lightgallery so you cannot go to the next picture, or display a video caption, for example.

ppoffice commented 5 years ago

@eldruin could you please add gallery-item class to the video element and see if it works?

eldruin commented 5 years ago

Adding gallery-item does not seem to change anything. I tried this:

<video class="lg-video lg-object lg-html5 gallery-item" controls poster="...">
    <source src="..." type="video/mp4">
</video>
ppoffice commented 5 years ago

@eldruin You can add your video like this

<div style="display:none;" id="video1">
    <video class="lg-video-object lg-html5" controls preload="none">
        <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
    </video>
</div>
<a class="gallery-item" data-sub-html="video caption1" data-html="#video1">
    <img src="https://sachinchoolur.github.io/lightGallery/static/img/thumb-v-v-1.jpg"/>
</a>
eldruin commented 5 years ago

That worked, thank you!