I'm currently working on a project for a cycling site, where they have a small list of workout songs. Some of these songs have a link to a YouTube-video, so you can hear the song.
I have to make it, so in the overview of the songs, there is a small playbutton, which, when clicked, play the selected youtube-video. But the video should be hidden, so you only hear the music.
When clicked, the button changes to a pause or a stop-button, so you can stop the music again.
But i can figure out the guidelines on youtube or other medias.
So I hope i can get some help here.
The site has to load a minimum of 10 YouTube-videos, and all of them should have a custom play/stop-button. So can anyone help me with that? :)
Thanks
-Thomas
<?
$yt_video = "http://www.youtube.com/watch?v=AfgdUfDgCq8";
$jw = <<< EOF
<script type='text/javascript' src='jwplayer.js'></script>
<div id='mediaspace' style="display:none;visibility:hidden;">This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://player.longtailvideo.com/player.swf',
'file': '{$yt_video}',
'controlbar': 'bottom',
'width': '1',
'height': '1',
'autostart': 'true'
});
</script>
EOF;
echo $jw;
?>
play/pause toggle<br />
Video 1<br />
Video 2<br />
Load Playlist<br />
Next Video on Playlist<br />
Previous Video on Playlist<br />
You'll need to download http://www.longtailvideo.com/players/jw-flv-player/ and change jwplayer.js and player.swf (optional) locations. You'll also need to create a crossdomain.xml file and place it in the root folder of your domain.
I hope it helps you :)
Live example # http://x.co/ZEpd
Related
I wanna learn how you guys can implement an embedded youtube video of personalize dimensions. I searched on Google "how to" and I tried some of the tips, but still not working. Can you help me ?
Create a new file index.html. Open it with your text editor (e.g., Notepad). Add the following to it:
<!DOCTYPE html>
<html>
<body>
<h1>My Embeded YouTube video</h1>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Change width="1280" and height="720" to the desired number of pixels. Change "https://www.youtube.com/embed/bWPMSSsVdPk" to whatever youtube video you want. For instance, if you'd like to change it to the following video: https://www.youtube.com/watch?v=ohr6O78jGzs
Just switch bWPMSSsVdPk to ohr6O78jGzs in the "https://www.youtube.com/embed/bWPMSSsVdPk" part, such that "https://www.youtube.com/embed/ohr6O78jGzs". Just note that not all videos are embeddable.
Open index.html with a browser. Just drag and drop it into the browser window.
Should do the trick.
I'm looking to embed a YouTube video into an XPage, probably into a repeat control. I've looked around but can't find anything specific to XPages. I can create a link to open the YouTube video but that just moves them to YouTube but I don't want to leave my site.
Does someone have an example of how to do this.
Use the HTML <iframe>, <object> or <embed> tag to insert YouTube videos into your XPage repeat control.
Example:
<xp:repeat
id="repeat1"
rows="30"
var="video"
indexVar="number">
<xp:this.value><![CDATA[#{javascript:
[ "http://www.youtube.com/embed/XMoTb1iep48",
"http://www.youtube.com/embed/lvs3vpmEKHg",
"http://www.youtube.com/embed/63lYaeOJZOA",
"http://www.youtube.com/embed/6D6PzLSlEsQ"
]
}]]></xp:this.value>
<iframe
width="400"
height="250"
style="margin:2em"
src="#{video}"
frameborder="0"
allowfullscreen="allowfullscreen">
</iframe>
<xp:text
rendered="#{javascript:(number + 1) % 2 == 0}">
<br />
</xp:text>
</xp:repeat>
Make sure you use http://www.youtube.com/embed/YOUR_VIDEO_ID as URL.
A detailed description you can find here.
You need to follow instructions and put a short snippet anywhere in the XPage. Something like:
<iframe title="YouTube video player" class="youtube-player" type="text/html"
width="640" height="390" src="http://www.youtube.com/embed/-X2zNe3YFNM"
frameborder="0" allowFullScreen></iframe>
With too many rows in your repeat you can expect lots of iframe reloads on every refresh.
I have a simple view that I'm using to test out video.js; it looks like this:
<script type="text/javascript" src="~/Scripts/video.js"></script>
<link href="~/Content/video-js.css" rel="stylesheet" type="text/css">
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<body>
<video id="testPlayer" class="video-js" controls preload="auto"
poster="~/Content/images/video-js.png"
data-setup="{}">
<source src="<url of a .mp4 file stored in my project>" type="video/mp4" />
</video>
</body>
After the page loads, I see the poster on the video player (along with some metadata information below the player that I haven't figured out how to get rid of yet). With preload="auto" I see ["Video Error", Object] immediately on page load in the console (using Chrome). If I change auto to none, I get the same non-descript error when I click the player. I cannot figure out what the problem with this error.
There doesn't seem to be any information tucked in the object that shows in the console. The best I could find, as far as description, was something that said media error. I've tried messing around with the encoding of the file a few different ways, but I consistently get the same error.
Does anyone see anything wrong with the view that I am missing (or know what in the world this error could mean)?
When specifying my source URL I was specifying it like this:
src="~/Content/something/place/etc.mp4"
Upon changing that URL to
src='#Url.Content("~Content/you/get/the/point.mp4")'
The video loads fine. I stumbled on some post that mentioned the video tag needing an absolute path, and took a stab trying this.
Forgive me if this is the wrong venue for this problem, but Google's deprecated developer forums recommend I go here.
Following is some heavily-simplified code meant to demonstrate the problem:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(
function() {
/*
This one second delay is just there to give the player time
to load. It's more complicated in my proper implementation.
*/
window.setTimeout(
function() {
var player = document.getElementById('player');
/*
Shocker, it doesn't work, regardless of playlist ID.
*/
player.loadPlaylist(
{
list: 'PL63FA01F86C3FE49A'
}
);
},
1000
);
}
);
</script>
</head>
<body>
<object data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3" height="360" id="player" width="600">
<param name="AllowScriptAccess" value="always">
<param name="movie" value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">
</object>
</body>
</html>
I've stumbled on this very problem while on a coding sprint, this week:
The loadPlaylist/cuePlaylist methods require both the list parameter and the listType parameter (it isn't very clear in the docs).
So, the code:
player.loadPlaylist(
{
list: 'PL63FA01F86C3FE49A',
listType: 'playlist'
}
);
Should work fine, both with SWF and HTML embeds. Jeff Posnick's recomendations on his answer to this question apply as well of course, but I've tested it to work in both scenarios.
listType can be 'list', 'search' or 'user_uploads', and list represents a list id or array of video ids, a search query, ou a user id, respectively.
A few comments on your code before getting to the question: first, if you're sure that you need to use the AS3 chromeless player, you really should use SWFObject to add it to your page to ensure that the proper <object> and <embed> tags are both used. If you only specify <object> tags then it will only work in Internet Explorer.
Also, you should have a onYouTubePlayerReader(playerId) handler in your code to detect when the player is fully loaded and ready to respond to API calls. That's much, much more reliable than attempting to do that via a window.setTimeout().
Regarding your actual question, I'm not sure that the chromeless AS3 player ever supported working with playlists. Was this code previously working that recently stopped? I'd imagine that you'd have a much better experience using the iframe embedded player and specifying controls=0 if you really don't want controls (but hiding the controls takes away from the playlist experience).
Help! Could someone please tell me what I'm doing wrong? I'm trying to produce a clickable image link so that when clicked it will start my youtube video. Here's what I have...
<iframe class="youtube" width="400" height="257" src="http://www.youtube.com/embed/I-TiwjSELQE?autoplay=1" frameborder="0" allowfullscreen imgsrc="images/ciafree-yt" width="413" height="242"></iframe>
Thank you : )
You could use jQuery and simply add id="yt-video" to your embed code.
Make sure you reference jQuery (https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js) in your HTML as well.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script>
Then add this simple jQuery:
<script>
$(document).ready(function() {
$('#yt-video').hide(); // hides the video initially
$('#id_of_image_div_clicked').click(function(){
$('#id_of_image_div_clicked').hide(); // hides the clicked image
$('#yt-video').show(); // shows the video
}
});
</script>
If don't matters for you try to use <object> tags like I'm using