I'm working with Ruby On Rails 2.3.8 and I'm using TinyMCE with image and video upload functionalities.
I've figured out that when I insert a Vimeo video, it won't work, because it needs it's own iframe, as the following:
<iframe src="http://player.vimeo.com/video/16430948" width="400" height="225" frameborder="0"></iframe><p>YOU! - Heart from KUSKUS on Vimeo.</p>
I'm now wondering how to show either youtube (which work just fine), vimeo, and other kind of embedded videos.
Update:
Searching on the internet I've found the following code, in the file /plugins/media/media.js, within getType function:
// Vimeo
if ( v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/) ) {
f.width.value = '400';
f.height.value = '321';
f.src.value = 'http://vimeo.com/moogaloop.swf?clip_id=' + v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/)[1];
return 'flash';
}
But it's not working for me. At least, all I see is that it's treating it as it was a common flash video, instead of inserting an iframe on the html for playing it (as it's done when you click the "Embed" button at vimeo.com).
The iframe tag usually gets removed (cleanup) if you do not specify otherwise.
Add this to your tinymce configuration to keep iframes inside the editor:
extended_valid_elements:"iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]",
This thread might be of help too.
Related
I am using Twilio Video React application, for my video application.
Twilio video renders video in two views, desktop and mobile, based on the device.
Due to space constraints on my desktop application I would like to render the video similar to that of a mobile on desktop, Is this possible? Is there a variable that I could set to allow me to do this ? Basically, I would like Twilio video to think that I am running the app on the mobile.
I tried to set isMobile to true in utils (as shown below), this doesn't seem to make a difference to the UI.
export const isMobile = (() => {
if (
typeof navigator === "undefined" ||
typeof navigator.userAgent !== "string"
) {
return true;
}
return /Mobile/.test(navigator.userAgent);
})();
I would like to achieve the below:
Twilio developer evangelist here.
I've not worked on this application myself, so I'm not familiar with how it is styled. There is not a variable for setting the style on mobile though, it is mostly controlled by CSS media query break points.
What you will notice among the code is that the CSS is embedded within the JavaScript. You will also find lines like:
[theme.breakpoints.down('xs')]: {
// styles
}
That breakpoint defines how a number of the styles are supposed to work at the small screen size. So if you remove the breakpoint and use the styles inside the breakpoint as the default styles, then the application will lay out in the mobile version.
Once you've done that, you can then place the video parts of the application within a div with a width you define and place the rest of your application around it.
Let me know if that helps at all.
I have just been looking into allowing my users to upload videos to their YouTube accounts directly from my site using the Youtube Upload widget. This widget is like 1000 times easier to deploy that the usual API process.
I have seen that it currently defaults to webcam_only=true but am wondering why? If I change the iframe to webcam_only=false I get the upload button and it all seems to work fine...
Obviously it would be an enourmous time saver for me if I could just use this functionality as opposed to trying to get my head around the whole API 2 way of doing things- plus that method seems to require refreshing the page which is no good for my app.
Any updates on why this is disabled and when it may be enabled?
Thanks in advance
webcam_only is set to true by default if the api creates the api. You can create the iframe element yourself as detailed in the "Loading an upload widget" of the developer docs.
https://developers.google.com/youtube/youtube_upload_widget
<iframe id="widget" type="text/html" width="640" height="390"
src="https://www.youtube.com/upload_embed" frameborder="0"></iframe>
<script>
widget = new YT.UploadWidget('widget', {
});
</script>
Or
<div id="widget"></div>
widget = new YT.UploadWidget('widget', {
webcamOnly: true;
});
I believe the option to upload videos using the YouTube Upload Direct widget has been removed as of August 2012. Although you can force add the upload button you get the button, but nothing happens with it.
https://developers.google.com/youtube/youtube_upload_widget#Revision_History
August 22, 2012 This update contains the following changes:
The webcamOnly property has been removed from the list of widget options that you can specify in the constructor for the upload widget.
Previously, this property was documented as having a default value of
false, which would mean that the widget would also display a button
for uploading an existing video file. However, the option to upload an
existing file is not currently supported, so the widget always only
displays an option to record and upload a webcam video.
Here is an example of the button with no action: http://sandboxsite.us/youtubetest.php
This is using:
<iframe id="widget" type="text/html" width="640" height="390"
src="https://www.youtube.com/upload_embed?webcam_only=false" frameborder="0"></iframe>
<script>
widget = new YT.UploadWidget('widget', {
});
</script>
If anyone figures out how to add the button AND make the uploads work, I'd surely buy them a beer!
I am trying to embed a Youtube video on my site with specific start and end times. Sites such as snipsnip.it and splicd.com use the start= and end= tags in the iframe src like so:
<iframe src='http://www.youtube.com/embed/OwjfE2ylbWU?start=5&end=10' width='640' height='360'>
</iframe>
However, this does not work on my web page. The video starts at the right time but then just plays till the end of the video. The Youtube API states that there is no "end=" tag, yet these sites all use it successfully.
Any idea on how to get embedded Youtube videos to end at a specific point?
splicd.com doesn't actually depend on the YouTube to stop the video. They poll the player with the following JavaScript and the YouTube Player API:
function checkYouTubePlayHead()
{
current = player.getCurrentTime();
if((current >= end) && splice) {
player.seekTo(start, true);=
player.pauseVideo();
}
if(current > start)
played = true;
}
It was working before without any js to implement, youtube just changed to googleapis video repository 2 days ago, and that messed up the end tag. It'll be fixed soon hopefully, not you're the only one, who need a solution for this. So far, this worked fine:
http://www.youtube.com/v/81hChAAt3So&start=107&end=115s&autoplay=0&autohide=0&theme=dark&color=white&rel=0&modestbranding=1&showinfo=0
Now most of the parameters are not passed. Be patient :)
Currently, I have an issue with populating an iframe that I have with a PDF document, but this issue only occurs in IE.
Basic Layout:
I have a screen that contains a list of items (attachments), which can be images, text or pdf. When the user clicks on one of these items - it will make a call to a controller action [ViewAttachment] which will return the requested item and display it in the iframe.
This currently works for all data types with the exception of PDFs in IE. (Firefox, Chrome etc. all display the PDF in the iframe without issue.)
I previously was using Adobe Reader 9, and recently upgraded to 10 in hopes of solving this issue. I'll attach some code to see if anyone has any suggestions as to how to possibly resolve this.
Code to Populate iframe: (Moved to two lines for readability)
$(".viewattachment").live('click',function ()
{
$("iframe#test").attr("src","<%=Url.Action("ViewAttachment","Images") %>?
attachment=" + $(this).next().val());
});
ViewAttachment Controller Action:
public ActionResult ViewAttachment(string attachmentGuid)
{
Attachment attachment= imageAgent.GetAttachment(attachmentGuid);
Stream resultStream = new MemoryStream();
resultStream = StorageProviders[attachment.ProviderName]
.ReadFile(attachment.FileReference);
resultStream.Position = 0;
FileStreamResult result = new FileStreamResult(resultStream,
attachment.ContentType);
return result;
}
Notes:
I've attempted toggling the "Display PDF in Browser" in Adobe Reader without any success.
Currently testing this for IE8.
When clicking on a PDF to view - the iframe simply remains at it's previous content and doesn't change at all.
After several different methods and iterations of testing - I determined that it was a conflict between IE8-9 and versions of Adobe Reader 9-10. I added the following meta tag to the window containing the iframe and it resolved all of the issues:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
This should at least work until an update / fix is made.
Have you tried hitting the pdf url directly? If it loads within the browser, then you can narrow down the problem to the iframe. If Adobe Reader pops up, then you know its a problem with the IE Plugin.
I had the same problem working with spring mvc. I releazed that if I put the Iframe inside some tag, like 'util:panel', the iframe does not load de pdf content in IE 8. When I put the iFrame out of the tag, all work fine.
My boss wants the following:
Requirements: Stream m4v videos from our Web-server to clients including standard web browsers (IE7, FF, Chrome, etc) and iPad!
I'm not really sure why he wants m4v...he mentioned efficiency but it may also have to do with iPad compatibility?? Anyway, I'm stuck with m4v.
I've browsed some related questions on SO, and this page is very useful as well:
http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback
So if I understand correctly, HTML5 with <video> tag will take care of all my requirements (browsers & iPad) except IE up to and including IE8.
So in my code:
<div id="demo-video-flash">
<video id="demo-video" poster="snapshot.jpg" controls>
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>
</div>
<script type="text/javascript">
$(document).ready(function() { // ... a dash of jQuery.
var v = document.createElement("video"); // Are we dealing with a browser that supports <video>?
if ( !v.play ) { // If no, use Flash.
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "video.f4v",
image: "snapshot.jpg"
};
swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
}
});
</script>
As the link above explains, test if the browser supports <video>, and if not, fall back to flash. If the browser supports <video>, I don't need to worry about the player as the browser handles that. If it doesn't support <video>, I need to provide:
(a) A flash player.
(b) A flash-compatible copy of my .m4v video
Questions:
1) Will this solution work for my requirements?
2) Is .m4v a good format to stream to iPad? (I'm guessing yes as it's an Apple proprietary format!)
3) Is .m4v "flash-comatabile"? That is, if I send it to my flash player will it work? I've read conflicting reports on this. If it's not, then I guess I need to have a copy of my video converted to a flash-compatable format...any recommendations? (.f4v seems common but we already have a .mov file will that work?)
4) Last but not least, what's a good flash player. I'm leaning toward flowplayer (http://flowplayer.org/), however, we already have a swf player installed (http://code.google.com/p/swfobject/). Seems this latter one would work...any advantages to one or the other??
Apologies if some parts of this question don't make sense...there's alot of info about video out there and it's hard to piece it all together...hoping some answers here may help. I can refine my question as needed.
Thanks in advance!
Peter
As far as I know..., IE does not support HTML5 so the tag would be unrecognized in IE...