I am trying to embed a video and have the spanish subtitles play by default.
cc_load_policy=1 works just fine.
cc_lang_pref=es does not seem to do anything.
I have tried ?cc_load_policy=1&cc_lang_pref=es and the subtitles come up automatically but they are English
I have tried ?cc_load_policy=1&cc_lang_pref=es&autoplay=1 and again, the English subtitles come right up, and the autoplay parameter makes the video start as soon as the page loads, but cc_lang_pref doesn't do anything.
I have tried replacing the "_" with _ and I am not getting anywhere. Has anyone made this parameter work?
Related
My client's site usesfancybox to load a lightbox for an embedded YouTube video. Clicking on the "play" image button in the middle of the video launches an embedded YouTube video.
This works fine on desktop, but will not work on my iPhone X (iOS 12). It will sometimes work for other iphone users after 3-4 clicks on the play button, but I cannot load it at all.
What should I be looking at to fix this on iOS? This is driving me crazy!
Page in question: https://www.maternlawgroup.com/
First, fancybox works fine, you can clearly see on the homepage or any other demo.
Secondly, in situations like this, you should start by checking output of browser console. There are a lots of JS errors on your page (not related to fancybox) and any JS issue can prevent further execution of the code. So, start by fixing them.
And last, I could not find fancybox on your page. It looks like you are using buggy custom JS code.
I designed a sample web application in which i used the video tag like this:
<video src="test.mp4" width="320" height="240" controls="controls">
<track kind="subtitles" src="test.srt" srclang="en" type="text/vtt">
</video>
When i tested this out on iPhone5 with iOS7, on selecting English from Closed captioning menu in the video player, no subtitles showed up. Am i doing it the wrong way?
What is the correct way of showing subtitles on the video? I couldn't find anything from iOS Developer Library. So, thought of putting this up.
I'm not sure whether you've created that code correctly (not a dev) however we're currently having trouble with captions created using WebVTT format. Captions are there, they work on desktop no problem but on iOS7 they only show once you've turned captions off then back on.
When you load the video, and toggle the captions button on the player the captions are defaulted to On but do not display. If you toggle captions to Off, close captions options, re-open captions option and toggle On, they display.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video> elements on it.
For some reason, when I load the page on an iPad, it is not showing the video posters.
Try the following:
load the page on a desktop browser
load it on an iPad or iPad simulator, and you get a big black box with a play button
please tell me why this is happening?
Here's what I've already ruled out:
Image Content-Type header.
I've validated that the image content-type header is properly set.
In the example above, the Content-Type header properly image/jpeg.
Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for src and poster, it didn't help.
Most of the StackOverflow questions on the topic just say "Restart your iPad"
Here's where it gets weird:
If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".
So I've tried doing the same thing, at first I just said that it doesn't work in my case.
Then, I tried this:
(all of the following on the iPad simulator)
Go to the site, video posters don't show
Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
Kill Safari
Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
Go back to the single-video test page, the video poster for that one no longer works either.
Repeat steps 3 to 8 to see the process of when video posters stop working.
So apparently, at some point, Mobile Safari decides it will no longer show any video posters.
Also, apparently, my site triggers this condition.
Clarifications:
When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).
In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.
Does anyone have any idea why this is happening? Is there a way to work around it?
EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years.
I got this working by using a PNG instead of a JPG.
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
Changed the file format to PNG and it loads fine.
I see the question keeps getting upvoted once in a while, though there's no answer.
So here's what I ended up doing:
On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img> tags.
When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.
I fixed it by adding preload="none" to my code.
<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.
Well if someone is still stuck on this is how I managed to get it done in React.js but the algorithm itself should be useful in any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
<iframe src="snip?showinfo=0&controls=0&rel=0"></iframe>
JSFiddle. All controls, including the title, are hidden before and during playback, but when the video ends, the title appears, ignoring the showinfo setting. Is this the intended behavior?
Not worth asking another question. Is it possible to hide the YouTube watermark with this setup?
To answer the first question, this is the intended behavior. YouTube wants the the person on the other end to click on more videos.
As for the second, what you're looking for is the modestbranding=1 parameter. Unfortunately you have to use that parameter first and you can't use it with showinfo=0. I guess YouTube has to get some type of credit right? There may be a tweak out there or an unlisted parameter. I'll give it a few more shots.
Also here you'll find an explanation from Brian Glick at YouTube for this functionality.
I know I'm late, but since this question was never answered...
The title only shows up when you're using the HTML5 playback if enabled and when the video is embedded via iframe. The Flash playback does not show the title in the end.
You can hide/cover up the title using the YouTube iFrame API with if (event.data == YT.PlayerState.ENDED). Be aware though, that YouTube doesn't allow to you to cover up too much. As long as there is a visible (no right-click) link-back to YouTube like the watermark, the logo in the controls or the clickable title, you should be fine.