I’ve been searching way to embed multiple YouTube videos as gallery.
For performance I’d like to load iframe after user clicks the thumbnail.
For better UX I’d like to stop previous video form playing when user starts a new one.
There is CodePens covering both aspects, but not combined.
Technologies used: HTML + JS.
Thanks!
codepen
Related
I am trying to display a html page from a website on iPad. Instead of using UIWebview, I used Textkit so I can display the content in multiple columns. I used iOS7 Day-by-Day day 21 example as reference.
http://www.shinobicontrols.com/blog/posts/2013/10/18/ios7-day-by-day-day-21-multi-column-textkit-text-rendering
It worked fine except the video does not show up at all. The video embeded in the HTML page is youtube videos.
Could anyone let me know if it is possible to show youtube video in textKit?
Thanks.
It's not going to handle it automatically, but you can put an NSTextAttachment in there with a placeholder image. Then when the user taps in the attachment you can bring up a new view controller with the video.
So I have used java to load only a thumbnail of a youtube video. When the thumb is clicked, the image div is replaced completely with an embed of the video on "autoplay." Everything was working as I wanted BUT
On YouTube when I look at the Analytics/traffic sources the "Unknown — embedded player" views dropped 90%+ to almost nothing as seen on the picture at the above URL. This is apparently because "autoplay" views are not recognized by YouTube as legitimate views which i confirmed on stackoverflow and elsewhere.
So... I want the best of both worlds. I want the fast load speed that comes with loading only the thumb at first AND I want to avoid autoplay so the views actually count on YouTube when the thumb is clicked. My temporary solution is to set autoplay=0 which forces the user to essentially click the same thumb twice, though I would prefer to avoid the redundant click.
Here is a example page from my site that has 4 embedded videos.
Use waiting/loading image instead of video thumbnail. Then use jquery to replace that waiting image by youtube embeded code few seconds after page loaded.
I'm trying to create an app and have embedded YouTube videos, but I need to remove the on-screen controls from the player (play/back/forward/volume, etc.). Does anyone have any suggestions on how to do this? Is it possible to have my own custom buttons instead (for example, "forward 60 seconds") I've looked at MPMoviePlayerController but research has me under the impression this is not what is called when UIWebView fires up a YouTube video.
I've also looked at the YouTube API but can't seem to find any good tutorials or examples on how to actually use it for iOS development.
Can someone point me in the right direction? I've been trying to figure this out for a couple of days and I just seem to be spinning my wheels.
Any help would be greatly appreciated!
you have multiple options
1. use youtube data api. you can edit the video controls if you use it.
2. you can use 3 rd party frame work youtubekit visit https://github.com/rinov/YoutubeKit
if you want to watch a tutorial got to youtube there is a channel called "codewithchris". here is the link https://www.youtube.com/playlist?list=PLMRqhzcHGw1aLoz4pM_Mg2TewmJcMg9ua
UIWebView is very limited. You cannot put video controls there. Because what UIWebView do is just shows another website as a frame. If there must be some controls, that controls should be in the website. So you cannot add any further controls.
If you want to use control buttons for your videos, instead of youtube, put the video in webpage with control buttons as like. Then put it in UIWebView. Or you can use the media player.
I want to open youtube videos after the user hits an image, that is generated dynamically. The user searches for a videos, and it appears 10 images previews on the scree (that part is done), know I want to detect the tap on that views and open a youtube video that correspond to that preview.
Do you know how I do it?
Thanks a lot!
You can use the tag of image followed by its url.
i'm still working on my html5 videoplayer w/ flashplayer fallback. it is now part of a bigger kind of widget, that encapsulates tabs, sliders, carousels (extensively using jquery)
focussing on the videoplayer: the user can (repeatedly) pick videos to play from a carousel . once a carousel item is clicked, i put a div w/ a fitting background-image over my videoplayer, so as to have a splashimage working the same for every client. that 'selfmade splashimage' and the current frontitem of the carousel (which was just clicked) then are bound to the load() method of the video. obviously there's a lot of stuff happening in between: i check for support of <video> and support of formats (mp4, ogv). i also fade in and out a bunch of stuff. that was a short version of it. and it's all working pretty okay on all the browsers i tested. it IS somewhat working on the ipad as well BUT:::
when i click my splashimage/playbutton ( -> triggering the load() method) the ipad wont play nor load my video RIGHT AWAY. the videoplayer stays black. however, when i click (trigger load()) a few more times, at some point it will start to work as planned.
the ipad works fine on the w3 html5 video events page. so i copied that page for my purpose, replaced a video with one of my videos and it gives me the FAULTY behaviour. so the problem are my videos, aren't they? the videos are currently hosted on a non-streaming server, is that the problem? my knowledge on that subject is really narrow.
sorry for not including any code and talking very general and abstract about the whole thing but i hope it suffices.
EDIT::: problem (kind of) solved. apparently the server the videos were hosted on, was causing the problems -_-
Could it have something to do with this: how to get your HTML5 MP4 video file to play before being fully downloaded as it could be downloading the video, hence the wait.