Add videos in display
suntong opened this issue · comments
Is your feature request related to a problem? Please describe.
Risking to be closed immediately as #675,
I want to mix pictures and videos for display.
Describe the solution you'd like
I know there is example code, but only YouTube videos are supported so far, as confirmed in #600,
whereas I want to show my own videos and images.
I know that online viewing/preview might be difficult, but showing them in list and offering to download might be an easier start, which will be more than good enough for me.
Describe alternatives you've considered
No alternatives I can think of, as I don't want to upload my own videos to YouTube just for this.
Additional context
N.A.
online viewing/preview seems to be not too difficult, based on this file
and this Demo video: https://youtu.be/tXMTwyzDsZk
But this is only judging from the surface...
You can use renderItem and custom render your own videos. This lib itself does not support videos and the example with youtube slide is showcase what you can do using renderItem
OK, I'm not a JS developer at all, but I'' take a look...
closed as completed? Could you point out which commit fix the reported issue please.
There was no issue here, I only saw a question, which I answered and you acknowledged, so I'm closing.
The request was titled "Add videos in display", and in OP it says,
I want to show my own videos and images.
A feature obviously missing from react-image-gallery.
Risking to be closed immediately as #675,
I want to mix pictures and videos for display.
Good that this is not the only react-image-gallery available, as the grass is greener over here --
https://github.com/OriAmir/React-Responsive-Gallery
U're right, and this one is so amazing too
https://github.com/igordanchenko/yet-another-react-lightbox
@suntong please read my original reply above yours.
You can use renderItem and custom render your own videos. This lib itself does not support videos and the example with youtube slide is showcase what you can do using renderItem
Adding video to your slide can be achieve by adding your own renderItem function. Here is an example (not tested, rough).
renderVideo(item) {
return (
<div>
<video controls >
<source src={item.videoSrc} type="video/mp4" />
</video>
</div>
)
}
render() {
const myCustomItems = [
{
thumbnail: 'https://www.w3schools.com/html/mov_bbb.jpg',
videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4',
renderItem: this.renderVideo // this will use your custom function to render the video
}
];
return <ImageGallery items={myCustomItems} />
}👋 Friendly reminder that this is a free and open source lib that I work on my free time, being snarky and passive aggressive here does not help anyone 👎
"as the grass is greener over here" was probably too much. I personnaly reacted to the suggest to open to more project to get/pick idea from there. Any project could helps others. And thanks @xiaolin : the current repository and react-image-gallery is really amazing and I was using it from 3 years ago with a lots of pleasure. Continue on this ; it participate to the open source movement and react adoption with many success 👍 👍 and thanks for the practicial example too
@xiaolin your example works well 👏
NB: we will probably integrate it soon (for some reason we didnt adopt the one I was talking about) thanks again
const original =
const thumbnail =
const imageId =
const originalAlt =
const thumbnailAlt =
let result = {original, thumbnail, imageId, index, originalAlt, thumbnailAlt };
if (original.endsWith(".mp4")) {
const renderItem = (item) => {
return (<div>
<video controls muted autoPlay loop className="myVideoStyle">
<source src={item.original} type="video/mp4"/>
</video>
</div>) };
result = { ...result, renderItem };
}
return result;and (css)
.myVideoStyle{
max-height: 300px;
}
.fullscreen .myVideoStyle{
max-height: 100vh;
}