Taking a look at the YouTube iFrame API, there appears to be no existing call or state that indicates whether or not a user is trying to skip to some point in a video. Ideally, in my implementation I would either like to disable YouTube controls entirely (which is apparently difficult to do from the perspective of browser-compatibility) or detect when a user is trying to skip, and return him to the point in the video before the attempt to skip was made.
Is there any good way to do this?
If you'll be disabling the controls in the iframe, try using the control = 0.
<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/?controls=0&list=PLeCdlPO-XhWFzEVynMsmosfdRsIZXhZi0&listType=playlist"
frameborder="0" allowfullscreen>
For customize player control, try using this tutorial - How to Control YouTube's Video Player with JavaScript.
For example, playback control (Play and Pause):
$('#play').on('click', function () {
player.playVideo();
});
$('#pause').on('click', function () {
player.pauseVideo();
});
Hope this help.
Related
I have used PrimeFaces for playing a youtube video from url.But there is a problem in this tag.Some of the youtube links are playing but some of them are not playing.For example;
this video is playing but this video is not playing.Here is the code;
< p : media value = "http://www.youtube.com/watch?v=mqOo7cYCBAo" width="600"
height="400"
player="flash"/>
you need to check the link. The video link which it plays has some modifications. Its not exactly the same as the one you're trying to play.
https://www.youtube.com/v/KZnUr8lcqjo
https://www.youtube.com/watch?v=mqOo7cYCBAo
Observe the strings after .com
You need to replace the string in proper format to make it play.
I have a UIWebView that contains a HTML5 video. The SRC of the video is dynamic, and uses HTTP Live Streaming. If, for whatever reason, the video cannot be played, the user is presented with the "play-with-a-slash-though-it" icon, indicating it cannot be played. I'd like to handle this situation by hiding the video player and presenting a message to the user instead. Are there any callbacks that I can subscribe to that will allow me to achieve this?
UPDATE
Thanks to codeghost's answer, I was able to resolve my problem. However, I thought it would be useful for future readers to see a code example:
<html>
<body>
<video id='video' width='640' height='480' controls='controls' preload='none' autoplay='autoplay'>
<source src='http://some.video.com'/>
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var video = document.getElementById('video')
video.addEventListener('error', function(event) {
if(event.type == "error")
{
alert("There was an error getting the video.");
}
}, true);
</script>
</body>
</html>
You could do this in the web page by adding a javascript handler for error event on the video tag.
I am using backbone.js to replace content on a page. After backbone places the new content I call a JW Player script to create a video (Flash normal web, HTML5 video tag on iOS).
When I play one video, stop that video, use backbone to replace the video, click to play the new video... the new video just has a spinner and won't play. (this only happens in iOS devices)
Has anyone had this issue that knows what might be happening and how to fix it?
This content is getting updated via backbone.
<div class="media-wrapper">
<div class="media-holder"><div id="media"></div></div>
</div>
This function is being called after backbone and creates the video on the div above.
function create_video(url,w,h,thumb)
{
jwplayer('media').setup({
flashplayer: '/api/js/jwp/player.swf',
skin: '/api/js/jwp/video.zip',
wmode: 'opaque',
image: thumb,
file: url,
height: h,
width: w
});
}
I am pretty sure it is not JW Player, but something to do with iOS and how it handles html5 videos.
This is a known bug[1] with using the same div and calling setup multiple times. The forum post linked to from the bug has the simple workaround of incrementing your div id each time you call setup.
[1] http://developer.longtailvideo.com/trac/ticket/1615
I'm inserting a youtube video on my website.
I customized everything I could so it wouldn't look like a youtube embed. And made it loop.
Now this weird playlist thing is appearing once the video loops.
How to remove it?
Iframe code:
<iframe width="426" height="319"
src="http://www.youtube.com/embed/hhLt3p01phg?&autoplay=1
&rel=0
&fs=0
&theme=light
&loop=1
&showinfo=0
&disablekb=1
&controls=
0&autohide=1
&playlist=hhLt3p01phg" frameborder="0" allowfullscreen></iframe>
Just for reference.
What you need is:
The video url: http://www.youtube.com/watch?v=z8GHf-aELjY
The embedded video url: http://www.youtube.com/embed/z8GHf-aELjY
Note: The above url is taken from the demonstrated website.
Now, update the iframe src attibute with to the following:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/z8GHf-aELjY?rel=0&showinfo=0"
frameborder="0"
allowfullscreen>
</iframe>
Notice how I added the rel=0&showinfo=0 at the end of the src attribute of the iframe element.
From the YouTube API Documentation:
rel: This parameter indicates whether the player should show related
videos when playback of the initial video ends. Supported values are 0
and 1. The default value is 1.
And for
showinfo: Supported values are 0 and 1.
Setting the parameter's value to 0 causes the player to not display
information like the video title and uploader before the video starts
playing.
If the player is loading a playlist, and you explicitly set the
parameter value to 1, then, upon loading, the player will also display
thumbnail images for the videos in the playlist. Note that this
functionality is only supported for the AS3 player.
The demonstration can be found at this website
It' just a bug in the player. I've reported the issue to the development team, but until it's fix you could try using the chromeless player.
https://developers.google.com/youtube/flash_api_reference#GettingStarted
I'm working on a Sencha Touch ipad app which pulls content from a JSON feed. The JSON contains some images, plus some video URLs from Youtube and Vimeo.
Where do I start trying to play embedded video in the app?
A few weeks on from my original question, I have a few tips to share on this topic.
We've built an app quite similar to the Sencha Touch demo app Touchstyle. One difference was we wanted to display videos as well as images referenced in our JSON feed.
Our JSON looks something like this for a single item of media, which could be of type image or video:
"Media": [{
"id":"28542",
"title":"mirrortrackmovie",
"type":"video",
"thumb":"http:\/\/i.ytimg.com\/vi\/X-z3_-7pwZ0\/default.jpg",
"video_host":"youtube",
"video_id":"X-z3_-7pwZ0",
"video":"http:\/\/www.youtube.com\/v\/X-z3_-7pwZ0"
}]
In order to embed Youtube and Vimeo videos in Sencha Touch, you have to use the iframe embed code that both sites provide. The following XTemplate inserts the correct video_id into the relevant embed code, depending on where the video is hosted.
tpl: new Ext.XTemplate(
'{[this.renderMedia(values)]}',
{
renderMedia: function(media) {
if (media.video) {
if (media.video_host == 'vimeo') {
return '<div class="video vimeo"><iframe class="vimeo-player" type="text/html" width="640" height="385" src="http://player.vimeo.com/video/'+media.video_id+'?byline=0&portrait=0&color=ffffff" frameborder="0"></iframe></div>';
} else {
return '<div class="video youtube"><iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/'+media.video_id+'" frameborder="0"></iframe></div>';}
}
}
}
}
)
By and large this method has worked fine, although we did experience some problems to do with loading video in a buffered carousel (a topic for another question).
You can start by looking into the Sencha Touch Kitchensink : Media > Video Example
http://dev.sencha.com/deploy/touch/examples/kitchensink/