I'm using the Angular JS extension angular-translate for language changing in my Cordova hybrid app with Mobile Angular UI.
The problem:
I found that I can't play the videos. And the video control bar is disabled. I looked in the source with Chrome's "Element Inspector" and saw that the file is there in <source>. I tried to copy the fully address and paste in the browser address bar and hit enter and the video started to play there in the browser window. So I know that the source address is the right one.
I realized that it could be a translate problem since I get the filename with translate code. And that is loading after the page is loaded. Then I tried to add translate-compile attribute to the element. Didn't worked.
So. What to do?
Here is the code:
<video controls poster="img/video-posters/{{'view-vid-img' | translate}}"><source src="img/videos/{{'view-vid-nme' | translate}}" type="video/mp4">Video not supported</video>
Edit:
Here is a demo:
https://plnkr.co/edit/ZZPJL1ReOC0ZOz4VI4kU?p=preview
Related
Based on this page on w3schools I don't see any mention of Javascript being needed to play HTML5 videos on recent browsers.
https://www.w3schools.com/html/html5_video.asp
Yet, when I disable Javascript on Safari, I can no longer play Videos embedded on my webpage via Tag. I even disabled lazy loading on a test page to see if that helped, but it didn't.
My primary concern is visitors on Mobile devices so falling back to flash is not an option.
hence the question, Is Javascript needed on fairly recent browsers ? what are best fallback options without requiring any plugins ?
like, using to provide direct download of Video, etc ?
javascript is absolutely not required to play the video in html5
the w3 video is not playing because it is rendering that part of the dom using js and also video is not local it is brought by anchor tag
I'm trying to add embed youtube video in my Ionic project, just using iframe.
Once I added, it works on the normal web browser(Google Chrome).
However, if I changed view mode to device mode(F12 & Ctrl+Shift+M), and refresh browser, the embed video stopped auto-playing. Is there anyone have experience before fixed like this problem?
Here is the similar case with mine: http://jsfiddle.net/eFLqJ/1005/
This module will be helpful for your problem: https://github.com/orizens/ng2-youtube-player
Will try to explain my question with an example:
Home page has a large flowplayer (video) after the header. And the login tab uses bootstrap models which appears on top of the video player onclick with a normal login form.
Everything works fine on all browsers and devices except iphone or ipad.
By doing some google search I have come to a conclusion that apple does not support any html overlapping the video content.
Could not find any discussions on this topic on this site too, so posting this question here hoping that someone can provide an alternative or a way to get this working (overlapping models on video player).
Try to add
wmode="opaque"
to the
<object>
OR
<embed>
tag parameters and see if it helps.
I refer to the demo code for the YouTube iframe demo located at: https://developers.google.com/youtube/youtube_player_demo. This works perfectly on my desktop and my iPhone, but it will not do so on my iPad in the Safari browser. I obtain a black screen instead. I have modified the code to prevent it auto starting (I have a button now for that). I also write event.target.getPlayerState() to a div on the screen so that I can see what is going on. I wish to use to use the iFrame player and to control it using Javascript.
When it starts up I obtain the still frame from the video (as expected) and the red play button. The getPlayerState() is 5 at this time (video cued). As soon as I hit play the player iframe goes black and the getPlayerState() changes to 3 (buffering). That is it, it will just sit there for hours without change.
I get the same black screen when I try the demo located at: https://developers.google.com/youtube/youtube_player_demo.
I have no difficulty playing a video the YouTube website. Also if I go to any video on the Youtube site and get the iframe embed link then I have no difficulty playing this from a web page. This of course does not have a a Javascript interface.
Has anyone any suggestions? What other info should I provide.
Many thanks.
Peter
This has since fixed itself. But now the demo code will not work on Internet Explorer, the on ready is not firing. There are many posts regarding this on Stackoverflow, but all marked closed. I will investigate further and if necessary open a new post.
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.