Hi im looking at intergrating fancybox with a youtube video but I want it so when you visit a website it pops up and automaticly plays without clicking a link.
for example. if you visit http://www.turkspoultry.com/ i want a video to suddenly popup and start playing about the history of turks poultry.
any ideas?
I was trying to figure out the same thing earlier, and I ended up ditching youtube. As far as I know, there is no way to autostart youtube videos, I could be wrong.
What I did is I loaded the video into EasyHTML5Video and it spat out 4 different video files and an index.html, I then put that index in a sub folder and I called the video/page in fancy box using:
$(document).ready(function () {
$.fancybox({
'width': 745,
'height': 565,
'autoScale': false,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'Mylinktothehtmlpage'
});
});
That auto opens the page and as long as you check mark AutoPlay when you are in EasyHTML5Video then all should work!
Related
I am using a video tag for the first time and the video has music the problem is that when you go the the next page the music continues. I can't seem to find anything on how to stop it.
Here is my tag:
<%= video_tag "propose.mp4", autoplay: :autoplay, loop: :loop, mute: :mute, class: "video" %>
Thanks!
This actually seems to be a problem with the HTML5 video tag. I'd recommend intercepting your page changes (with jQuery for example) and then pausing the video with JavaScript. I'm assuming you're using jQuery:
Like this:
$( window ).unload(function() {
$(".video").removeFromParent();
});
If this doesn't work, you should try to pause the video instead of removing it from its parent, but I think this should work. Give it a try :)
Cheers
ffmepg and qtfaststart to process my video uploads. The converting is working fine and the video gets uploaded. My problem is that i can't display it. When I first tried <%= video_tag(#post.file.url) %> I just get a blank area. I've also tried jplayer, got the installation and all working and when i tried to call my video path it doesn't work.
Here is the js code when I tried with jplayer.
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "<%= video_tag(#post.file.url) %>"
});
},
swfPath: "/",
supplied: "m4v",
solution: "flash, html"
});
});
</script>
I don't know how to call the uploaded video and display it, Please really need some help!
please always read the documentation. otherwise you will get comments a la RTFM.
when you use video_tag it inserts an html5 video element into the page. read about it here: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-video_tag
<video src="/trailers/hd.avi" width="16" height="16" />
this is probably not what you want for your jPlayer. when you inspect the html source, this should be obvious. i did never use jPlayer, but i assume that it would like to be pointed to the streaming source, which i guess is #post.file.url in your case.
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 :)
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.