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.
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
I'm using jsPDF to generate a pdf from the current HTML, the code works fine if I paste it on the console and downloads a PDF with the current HTML, but when I put it on a JS file it downloads a blank PDF:
This is the code:
<script>
function descargar_pdf(){
var pdf = new jsPDF();
pdf.addHTML(document.body,function() {});
pdf.save('Estadodecuenta.pdf');
};
</script>
The function is called from a button:
<button class="descargar_pdf" id="ignorePDF" onclick="descargar_pdf();"> Descarga tu estado de cuenta</button>
The second argument in the addHTML function is a callback function which gets called after the HTML is rendered.
pdf.addHTML(document.body, function() {
pdf.save('*.pdf');
});
The last correctly working version of html2canvas is RC1. Downgrade to that one and it should work as expected.
This may sound stupid but there's a lot of security plugins that see JSPDF as an "unsafe" js and just block it , i had the same problem as you did but after testing it out on incognito mode (no extensions) it worked fine.
This may not the solution to your problem but its a advice you should keep in mind
I'm trying to use jPlayer to play an mp3. I have the jPlayer CSS and images working, now it's just a matter of playing the mp3. To do so, I include the following javascript in the application.html.erb layout's head:
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "media/sound.mp3",
// m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
// oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
swfPath: "/javascripts",
supplied: "mp3, m4a, oga"
});
});
When I load the page and click the play button, I get the following routing error:
ActionController::RoutingError (No route matches [GET] "/calls/media/sound.mp3")
Would someone mind taking a spare minute to explain to me why this is? Should I be including the javascript in something like this?
<%= javascript_tag 'some js code' %>
Any assistance is very much appreciated. Thanks in advance.
I realized I was I was missing a starting / i.e. changed "media/sound.mp3" to "/media/sound.mp3".
Then, I decided to use a path helper
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!
Trying to setup a test page that access a video hosted on S3 and streamed using CloudFront. The player I'm using is JWPlayer, which is supposed to work with iOS devices as well.
Unfortunately, nothing happens when I open it on the iPhone... I'm sure the answer is obvious, but it has eluded me for the last hour. Here's the code (mostly a copy/paste from http://aws.amazon.com/articles/4101?_encoding=UTF8&jiveRedirect=1):
<!-- THIS IS A BASIC HTML FILE TO PLAY MP4's USING JW PLAYER
The following code is from longtailvideo.com's 'Setup Wizard', found at http://www.longtailvideo.com/support/jw-player-setup-wizard -->
<HTML>
<HEAD>
<TITLE>
Streaming Video with JW Player
</TITLE>
</HEAD>
<BODY>
<!-- Put a header above your video, if you like
-->
<H1>This is my header</H1>
<script type='text/javascript' src='http://s3.amazonaws.com/intrinseque-video/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://s3.amazonaws.com/intrinseque-video/player.swf','mpl','470','290','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','mp4:oceans-clip.ipad.mp4');
so.addVariable('streamer','rtmp://s1m21pqfl8vlrl.cloudfront.net/cfx/st/');
so.write('mediaspace');
</script>
</BODY>
</HTML>
<!--Common problems:
- You cannot have any spaces in any of your URL's (including your 'rtmp://...' URL) (i.e., http:// thereisaspaceatthebeginninghere.xxx)
- Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf
- You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf)
- There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'.
-->
Check out http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront
You need to add something along the lines of:
modes: [{
type: "flash",
src: "/assets/player.swf"
},{
type: "html5"
config: {
file: "http://dXXXXXXXXXXXX.cloudfront.net/example.mp4"
provider: "video"
}
}],
to the code for it to handle correctly both flash and html5.
Actually, not all mp4 files are born equal. Ones converted with weird encoders/codecs sometimes don't work on IOS. I had a case where, handbreak encoded mp4 didn't play, while ffmpeg encoded same video streamed perfectly.
I never understood what exactly was the difference. Maybe something to do where you place video metadata insdie the file.