I am trying to make video player where, when you click on backward button, it will go backwards, and when it hits 00:00 time, it change video source and starts to play another video.
Asume that list of videos can be js array. When you are on video2, you hit backward. Video2 is going backward and when it hit 00:00, it swap source to video1. And video1 will be playing backward.
var vids = [
"video1",
"video2",
"video3",
"video4"
];
According to my research, HTML5 video supports onended() function when you can detect normal end of video, but it does not solve it for end in backward direction.
According to this thread play-a-video-in-reverse-using-html5-video-element.
Browsers currently do not support playing video backward. There is only one way how to manage it by faking current time in video. See how it looks like in this jsfiddle http://jsfiddle.net/UkMV2/5/
Use of onended() function when video plays forward, and put another video when that before ends is easy. But how to detect that video ended in start?
I will appreciate any suggestions which can move me forward.
Related
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?
I'm writing a simple app to seek an html5 video in both directions by dragging mouse. I also need to overlay stuff on top of the video so I'm using html5 canvas. The video element stays hidden, I play the video and update the canvas image every 20 ms. This much has no performance issues.
However I want to seek the video when I drag the mouse. It turns out that I would need to seek the video every 20 ms which leads to a choppy performance. Another hack I tried was to fast forward the underlying video when I drag. This has almost perfect performance and is sufficient for my use case except I can't rewind and fast-forward the video.
My research says the only way right now to rewind an html5 video is to set the currentTime backwards frame by frame, but again I can't afford to do this every 20ms or the video gets choppy.
Is there any way around these limitations? It would be enough if I can just play the video backwards in normal speed.
I have a slideshow/slider containing images and videos from youtube.
Is it possible to pause the current youtube video if the next or prev button is pressed.
Also would i be able to auto play the clip when one comes back to the same slide?
Yes. YouTube JavaScript Player API Reference is what you need https://developers.google.com/youtube/js_api_reference#GettingStarted
Use player.stopVideo() method.
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.