As an experiment, I wanted to create a video feed like Tik Tok in vue.js.
But I ran into a problem, if I want to turn on autoplay, I have to turn off the sound. At the same time, in order to turn on the sound, the user must interact with the element - but each next video in the feed is one way or another a separate HTML element "video" and there are many such elements, it would be stupid if the user has to turn on the sound on each of the videos.
Please tell me how to approach this problem?
Related
I’m developing a portfolio site that requires a custom Vimeo player, with a play button, pause button, mute button, timer, and progress bar.This website has a perfect example of what I would need (just with different CSS).
I’m assuming that within the Vimeo player for whatever video is embedded, there is a piece of data (please forgive/correct my terminology) that corresponds to the play state, pause state, volume, and time that the video has played, which I would then link to with a Javascript event to toggle each of those for the play, pause, and mute buttons. Though from poring over the source code of the above site, and searching for online solutions, I haven't been able to figure out where that information lives.
In short, does this seem like the simplest way to achieve the effect, and if so, how would I get access to the "play state"?
I'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?
On my website, I'd like to be able to stop the video loading. Can I do it with jquery? What're my options?
The need is that my website has many videos, when a user with a limited internet connection wanna see a one-hour video then decides that he wants quit the video page (ajax only is performed), the video continues its loading anyway, so if does this with two or three videos his browser will freeze to death. So unless he refreshes the page, the video loading goes on til it's done.
Given that my web's based on apache2, symfony2/php5, projekktor/jquery
Check this answer - HTML5 Video: Force abort of buffering
Apparently removing the value of the src attribute will cause the video to stop loading/buffering
The OP also suggested stopping the video first to prevent any errors in the Browser console
One way would be to split the page into multiple single video pages. It still doesn't solve the problem completely but at least user's resources are used in to a smaller extent.
Another idea that I've had is to set the source of the video to an empty string when the user stops the video. As far as I've read online it frees up the space and leaves the video blank. There should also be a button to set the source to the original path should the user want to play the video once again.
The second idea provokes minor issues such as being unable to continue the video from the moment the user stopped it but I recon it's still better than taking up user's connection to load it.
Why don't you use the API to play&pause the video: API
player.setPlayPause():Boolean
Sets the player to pause if its playing or vis versa.
Ore one of these:
player.setPlay():Boolean
Sets the player to play. If its already playing no changes apply.
player.setPause():Boolean
Sets the player to pause . If its already paused no changes apply.
player.setStop():Boolean
Sets the player to stop . Will cause the playback component to stop immediately and displays the current item´s poster image. Furthermore the start-button shows up.
I am looking to have a video start when a page loads, but once the video has completed, to hide the video (remove the layer possibly). I saw it on a yoga site a few years ago where a video message from the owner appeared over top the content when the page loaded but then dissapeared after the video was done. Not even sure where to begin looking for something like this.
This is something that needs to be handled at the player level. Many flash players or frameworks allow you to register for an event. One event might be on video complete. First get this working. You may not be able to do this from javascript. For example, adobe's strobe player requires you to write a swf plugin which would be loaded in the flash player. Not trivial.
After you have registered it, you can easily close the window by executing some javascript function.
Let me know if you have more questions.
I have a video playing on my page. I want to show and hide some div's when the video reaches a certain point. Lets say hide something on 10th second and show it again on 20th second.
I can easily do it in HTML5 with video tag and currentTime attribute but for IE I have to create the same functionality and I think with flash based videos (from YouTube or something like that).
Is there a way to detect the current time of a video playing on my website, embeded from YouTube, Metacafe or any other video sharing site?
I know I could detect it in flash and make it run some JavaScript function but I don't have flash nor have the skills to do it in AS3.
Is it possible to do it from JavaScript level or does any video sharing website out there provides this kind of functionality for their videos?
You could look into using flowplayer, it exposes events for meta data and timing.
You can use ExternalInterface to communicate between flash and js. So inside the flash app, when the video reaches the defined time, you can trigger a call to js function, doing whatever you need with the divs.
Since you will need to receive a stream and you need to detect a specific point in the video I thing you have read this inside flash.