I have a list of objects that contain a video or photo
I would like to make scrolling possible (up - down - up, something like in TikTok). Each card has a full-screen image or video.
For this I used the library:
https://www.npmjs.com/package/react-native-swiper
Scrolling works as intended, but there are other problems:
all objects load immediately (there should be some pagination)
all objects start immediately (when the video has sound then everyone starts playing)
Is there another useful solution or can something be done with this library?
How about using onIndexChanged={(index) => this.setState({index})} to set and get the index
And then set Video disable auto play.
If this.state.index equal that page, then that video plays start or it pause?
Related
I am using the background video option in Divi (by elegant themes) in Wordpress to show a 4 minute or so long video in the background. The thing is, I don't want the audio. I understand if you scroll down far enough the entire thing stops, but I just don't need or want the audio. Is there any custom code that I can use (or a plugin) to get the audio to stop playing ON THE VIDEO BACKGROUND, or will I have to convert it to a gif? Thanks.
I am creating a site that mostly contains video and am trying to get the same effect as seen on the trailers on www.apple.com/trailers where in clicking on the link to the video will display it at its specified resolution inside a slightly opaque black frame, thus removing distraction from the rest of the site. I am also at a loss for figuring out how to click upon the area outside of the video to stop viewing it.
At present I am using the tag with a small amount of javascript and custom css ui buttons, this would work fine but the native "fullscreen" function is ugly and i'm only looking to play the video in a window. My video also carries on playing when I come out of fullscreen, I would like that to stop.
Is there any way to simply code the functionality behind when clicking a placeholder, giving an opaque black frame in which the video at its specified resolution will sit and play, and then clicking outside of the frame will stop the video and take me back to where I found the video?
looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.
Background:
I am building a timed jQuery slideshow that contains a YouTube video as one of the elements. I am using the YouTube JavaScript Player API to detect the play status of a video (slide 1) and pause the slideshow if a video is playing. This portion is working.
However, there is a problem if the user clicks the play button during the 700ms slide transition. My jQuery will not detect the playing video on that cycle (slide 1), but it will detect the playing video on the next cycle (showing slide 2). It will pause the slideshow on slide 2, and there is no way to resume the slideshow again - since that would require pausing the YouTube video on slide 1 (now hidden).
Question:
How can I disable the play button on the YouTube video during the transition and re-enable it after it is complete? One option is to put a transparent gif image over the entire video, but perhaps there is a more elegant / less kluge-y solution using the YouTube API? I haven't been able to find it.
I don't think you can do what you want to do with the default interface. However, have you taken a look at the YouTube Chromeless Player? It's part of the YouTube API, but strips away part or all of the "chrome" on YouTube. My only concern is that this might remove too much of that chrome. Give it a look and see if it will work for you.
I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>