I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)
Related
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)
I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.
I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.
I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.
Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.
Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).
How do I make it so when I have an embed code for a video, if they click the video it goes to another page? but doesn't mess with the controls of the video itself?
Thanks!
Usually, the "link" the video goes to is actually controlled by the flash movie that plays the video. If you use HTML5 video, you can control it better with usual JS event listeners, but it's not supported everywhere.
Alternatively, you can put an absolutely positioned transparent image over the video part of the player, and use JS (or an tag) to turn it into a link to elsewhere, while leaving the controls uncovered. I would test this thoroughly, and it may not work as expected on older IE versions.
I'm currently creating an iPhone web application for piano chords, and I wanted to add an option that would let the user press a Play button and play the selected chord. However, I'm not sure how to do this, or if it's even possible.
Basically, is there any way to programmatically (through Javascript) play a sound file (wav, mp3,...) in the background? (i.e. not leaving the page)
Thanks for any help!
(Keep in mind that I'm developing a web app, so I'm using HTML, CSS & JS, not the native SDK)
short answer: no
from the docs:
Safari on iPhone plays audio and video
in webpages in fullscreen playback
mode only.
yes you can.
http://www.schillmania.com/projects/soundmanager2/
see it in action at soundcloud.com
With HTML5 audio, iPhone can play without fullscreen.
IOS requires sound be played with the press of a control button. If you are looking to autoplay a sound at some event on an HTML page, forget it.