Is it possible to make an external play button for a video without the play button in the video?
For example when you want to start a youtube video you see a red button in the middle of it. I want that hidden and a button outside of the video to start the video. It doesn't matter what video player it is.
I want to do this because iPad does not allow autoplay. And using the external button I want to trick it to autoplay.
This is a website that does "autoplay" on the iPad.
http://24hoursofhappy.com/
There is a reason why YouTube doesn't allow autoplay on mobile/tablet devices, video's use up alot of bandwith which may become expensive for the user.
U can trick it like u mentioned with a custom play button or even force it to start playing without a custom button. There is alot of detailed information on YouTube's API page.
Check out this page: https://developers.google.com/youtube/
I'd refrain from always autoplaying a video though if not just for bandwith reasons. In your case u could check if the device is a tablet.
I finally found an answer for this using HTML5 videos. It allows me to use the control buttons externally so I can use an overlay and hide the overlay when the play button is clicked so it will seem like it is auot played.
Related
I'm using HTML5 video tags in my webpage. I have a small "Watch Video" button that opens a modal displaying this video. Everything works as intended. I am, however, trying to determine what changes in the HTML document (or possibly the DOM?) when I hit the controller's play button.
The goal in determining this is to have the video begin playing automatically once the modal is revealed which I plan to do with a small JS script. Also, when I close the modal window, I will have it disappear.
I did a few Google searches and started to see people discussing creating custom controllers for these videos which I feel is unnecessary - I want to utilize/modify what is already in existence.
To summarize: What is happening when I hit the play/pause controllers in an HTML5 video?
The W3C has a handy <video> interface that shows how the properties and events on a video element change and fire as you interact with it.
As you can see from that demo, the major things that occur when you play a video are:
the video's paused attribute is set to false
the video emits a play event
If the video has preload value of "none" (as this one does), then the video will begin loading when the user presses play, which triggers a few other events, e.g, the canplaythrough event will eventually fire, the buffered attribute will continue to change as the video loads, etc.
So, as I searched, I found that is a little problem to play inline videos (no full-screen).
But still, there is a way to play videos inline?
If there isn't way without make an app, do you know a way to play video on full screen and show elements on the screen while the video is playing?
The best solution I found is to play video on full-screen and "alert" message that jumped based on video time.
Maybe there is a way to show a "div" element just to show text on that full-screen video, without use "alert" that needed to click "ok" every show?
Thanks
I'm trying to get it understand but after 2 days of digging the code I thought that I will post my issue here...
According to Apple's documentation, autoplaying videos on iOS devices cannot be done without user interaction first (e.g. tap on video). Despite that, mobile YouTube (m.youtube.com) is able to autoplay its videos just after loading a page with video.
Does anyone know how they are doing it?
PS. I've checked all available JS/HTML techniques of autoplaying videos on website on iOS (e.g. iframe, fake click, triggering touch event on video, fetching video with XHR).
I believe that youtube.com is a single page app. So when the user clicks on the video from the list view the page is not loading and their javascript uses that initial click, that leads to the video page, as the click that starts the video. It's not actually autoplaying, it's just a trick.
I am using oembed to work with some vimeo videos but I am having a few issues on mobile platforms.
For example, on Android, if I click on the video, the screen goes black and I have to tap again to get the controls to show then you can hit play.
When the video completes, it just sits there and you have to hit the back button.
Additionally once you hit the back button, the thumbnail of the video on the original page is grey and no longer shows the proper vimeo thumbnail.
so, I am having a host of issues and am not really sure where to start. Do I need to work with vimeo's javascript API to make the video behave how I want on mobile?
How do I make it autoplay on tap?
Can I make it automatically return to the page upon completion?
Any insight on the strange greyed out thumbnail?
If someone could point me in the right direction I would appreciate it.
I have an automatic slideshow with images and youtube videos. If a user clicks play on a video, as the slideshow continues running the next slide is shown hence hiding the video.
Is it possible to know if the video is running, as to stop the slideshow from hiding the video?
Thanks...
Depending on how much ease you want, you could use Popcorn.js (https://github.com/mozilla/popcorn-js). This will let you load web media and then do things on page (whatever you want, change the page, play or pause a slideshow, trigger some JS, etc) based on what happens in the video, as well as letting you query the video's state by using the popcorn API