Implementing Soundcloud Player with Rails SDK - ruby-on-rails

I´m a newbie rails developer, I´m trying to do a simple thing with rails and soundcloud but seems that after some days messing around with the API documentation can´t find the best way to do what I want.
Im trying to develop a contest for a local pub where DJ´s can send us their best track and they are voted to win a prize.
My approximation to this is storing the soundcloud url of his track in a database field and then this tracks are showed in the web through the little soundcloud player.
I think I can use this code in the view file.
<div id="player">
<object height="70" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf? url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{"<%= #trackid %>"}&player_type=tiny{widgetParams}"> </param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent"></param>
<embed wmode="transparent" allowscriptaccess="always" height="18" width="100%" src="https://player.soundcloud.com/player.swf? url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"> </embed>
</object>
</div>
To change the {trackid} im using the value of the track.id, which i get in the controller with this code
client = Soundcloud.new(:client_id => '2074955755d1c3997e10463d8a56960f')
# call the resolve endpoint with a track url
track = client.get('/resolve', :url => "http://soundcloud.com/forss/flickermood")
# print the track id
#trackid = track.id
This is not working.
Another way I tried to make this work is trough the oEmbed. I tried to run the example in the API documentation.
In the View file I understand I have to put the Javascript Widget:
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: 'xxxxxxxxxxxxxxxxxxxxxxx'
});
var track_url = 'http://soundcloud.com/forss/flickermood';
SC.oEmbed(track_url, { auto_play: true }, function(oEmbed) {
console.log('oEmbed response: ' + oEmbed);
});
</script>
And in the controller this code:
# create a client object with your app credentials
client = Soundcloud.new(:client_id => 'xxxxxxxxxxxxxxxxxxxx')
# get a tracks oembed data
track_url = 'http://soundcloud.com/forss/flickermood'
embed_info = client.get('/oembed', :url => track_url)
# print the html for the player widget
puts embed_info['html']
I´m a bit lost and I think im failing in some basic thing, and thats why I dont find info about how exactly implement this.
Thanks for your time

This line in your view jumps out at me:
<param name="movie" value="https://player.soundcloud.com/player.swf? url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{"<%= #trackid %>"}&player_type=tiny{widgetParams}"> </param>
The double quotes around your #trackid are cutting off the value parameter and messing up your HTML. Try this then check the HTML your view generates:
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F<%= #trackid %>&player_type=tiny{widgetParams}"></param>

Related

Why are YouTube videos using 'youtube.com/v' not loading

Please review this page.
The embedded video plays when the page is viewed on a mobile device but not when viewed on a computer (tested on two laptops running Windows 8 and 10, on Chrome, FF, and Edge).
This issue only exists with YouTube videos and the problem began 48 hours ago (approx.)
For example, see this YouTube URL (no video is being loaded):
http://www.youtube.com/v/RCsJHHUkisw&rel=0&color1=0x054b81&color2=0xe2e2e2&hd=1&showinfo=0&enablejsapi=1&playerapiid=ytplayer&fs=1
I have managed to handle this problem by rewriting the emvideo module.
I am currently using the module version = "6.x-1.26".
I didn’t take the time to change the entire module;
I changed only the parts I needed:
All the changes were made in this file:
\sites\all\modules\emfield\contrib\emvideo\providers\youtube.inc
In function theme_emvideo_youtube_flash line 444 I changed the line
$url = check_plain("http://www.youtube.com/v/$code&$related$autoplay_value$colors$border$high_quality$display_info$enablejsapi$fs");
to
$url = check_plain("https://www.youtube.com/embed/$code"); .
What I did was to look at the youtube embed code and try to make the link look the same.
Next step was to change the FLASH output, in line 566 function
theme_emvideo_youtube_default_external and change the next content:
<div id="$div_id">
<object type="application/x-shockwave-flash" height="$height" width="$width" data="$url" id="$id">
<param name="movie" value="$url" />
<param name="allowScriptAccess" value="sameDomain"/>
<param name="quality" value="best"/>
<param name="allowFullScreen" value="$fullscreen_value"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="scale" value="noScale"/>
<param name="salign" value="TL"/>
<param name="FlashVars" value="$flashvars" />
<param name="wmode" value="transparent" />
</object>
</div>
To
<div id="$url"><iframe width="$width" height="$width" src="$url" frameborder="0" allowfullscreen></iframe></div>
And that’s all…
Hope it helps a bit…
The following should be pretty close to a drop-in replacement for what's currently being served on the page referenced in the question (the object tag with id emvideo-youtube-flash-2):
<iframe id="ytplayer" type="text/html" width="590" height="499"
src="https://www.youtube.com/embed/Je2vE5RLJ6o?rel=1&showinfo=0&enablejsapi=1&fs=1&origin=http://www.islandcricket.lk/"
frameborder="0" allowfullscreen>
A few things about the implementation currently being served:
Using object tag and the embed URLs of the form youtube.com/v/video id (which only serves a Flash player, not HTML5) to embed YouTube videos has been deprecated for over a year.
the player parameter hd is deprecated. The iFrame player (used in the above code), will automatically chose the best quality to display based on a variety of parameters. If you wish to control this you can use the Javascript API.
the rel, showinfo, enablejsapi and fs parameters should continue to function as they have in the previous implementation (parameter documentaion here)
The allowScriptAcess parameter set to sameDomain in the current implementation is replaced by the origin parameter and should be set to the URL severing the webpage (documented here)
Screenshot of the above code working on islandcricket.lk tested via webdev tools:

Uploading Videos using ckeditor in rails3

I am using ckeditor "4.0.4" with carrierwave and Active Record.
Its fine while iam uploading images and embed videos from youtube.
But i stuck when i am uploading videos from local machine. It is storing that images in public/ckeditor/attachements/model but it is not displaying any content in show.
How can i play that videos?
And in my rich description i need to differentiate everything. please tell me the easiest way to do that?
config.js
{ name: 'insert', items : [ 'Image','Iframe','Flash','Table','HorizontalRule','Smiley','SpecialChar' ] },
new.html.erb
<%= f.cktext_area :description %>
while playing attachments the uploaded video converting to embed tag like
<object height="252" width="425" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="black" name="bgcolor">
<param value="high" name="quality">
<param value="transparent" name="wmode">
<param value="showall" name="scale">
<param value="/uploads/ckeditor/attachments/5/at_school_10_sec._video.3gp" name="movie">
<embed height="252" width="425" wmode="transparent" type="application/x-shockwave-flash" src="/uploads/ckeditor/attachments/5/at_school_10_sec._video.3gp" scale="showall" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" bgcolor="black">
but it is not playing any video showing some empty place only.
Thanks a lot in advance.

How to Get Youtube IDS from url's list PHP

Sorry may be very beginner question. i have a text area with post method where i'll list youtube URLS like this:
http://www.youtube.com/watch?v=bT7kCbgEAqw
http://www.youtube.com/watch?v=AwyucYgVKb0
http://www.youtube.com/watch?v=QP8PyUhx1AU
http://www.youtube.com/watch?v=AvTg20fYZcE
i want just video ids, what is good way to get video ids like this:
bT7kCbgEAqw
QP8PyUhx1AU
AwyucYgVKb0
AvTg20fYZcE
Thanks :)
$vid_id = explode("?v=", $link);
$vid_id = $video_id[1];
Make $link your URL and then this will return everything after the ?v= in the URL.
Because youtube urls can also be http://www.youtube.com/v/id de explode wil not always work.
Following code will get the v id with both urls.
<?php $youtube_url = 'http://www.youtube.com/watch?v=XXXXXXXX';
parse_str(parse_url($youtube_url, PHP_URL_QUERY), $youtube); ?>
<object width="400" height="224">
<param name="movie" value="https://www.youtube-nocookie.com/v/<?= $youtube['v'] ?>"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="https://www.youtube-nocookie.com/v/<?= $youtube['v'] ?>" type="application/x-shockwave-flash" width="400" height="224" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Soundcloud player appears over colorbox in chrome

I'm using colorbox to display images for a website. In Chrome version 11.0.696.65 only when the color box is activated, the soundcloud player appears infront of the displayed image.
I've tried changing the z-index of the colorbox, but with no success. I'm pretty sure this is a new problem with chrome/soundcloud as I wasn't having the problem before.
UPDATE The following code works and might help someone.
#Add transparent mode to youtube
embeded_link.gsub!(/("http:\/\/www\.youtube\.com\/embed\/.{11})(")/,'\1?wmode=transparent\2')
#Add transparent mode to soundcloud
embeded_link.gsub!(/(<object height=".+" width=".+">\s*)(<param name="movie" value="http:\/\/player\.soundcloud\.com\/player\.swf)/,'\1<param name="wmode" value="transparent"></param>\2')
You need to embed your Flash with wmode="transparent" (or opaque).
Here's a snippet with wmode inserted in both the required places.
<object height="81" width="100%">
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5475496"></param>
<param name="allowscriptaccess" value="always"></param>
<embed wmode="transparent" allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F5475496" type="application/x-shockwave-flash" width="100%"></embed> </object>
See: http://kb2.adobe.com/cps/127/tn_12701.html

rails 3 embed video

I'm trying to embed youtube video.
in the videos db table, i have field called "link".This contains the link of the video.
In Controller Videos, there is just empty method def vidlist, since i'm just trying to display single video.
I have vidlist.html.erb:
<blink>
<h1>Vidlist</h1>
<object width="640" height="385">
<param name="movie" value="<%= Video.first.link %>">
</param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="<%= Video.first.link %>"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
</blink>
the link contains this string:http://www.youtube.com/v/KgmeL_xuB0I?fs=1&hl=en_US&rel=0&autoplay=1
In routes .rb, i have uncommented the default route matching.
Then, i started server.Entered localhost:3000/Videos/vidlist
The browser doesn't display anything at all.
and there's nothing in the console too when the server is running
Have you tried using html_safe on the link? This will help ensure that you don't have issues with escape chars etc.

Resources