Dailymotion iframe api - dailymotion-api

I am using dailymotion api to play videos. Example is straight from the docs:
http://www.dailymotion.com/doc/api/player.html#api-reference
And its giving me errors in console:
<!-- This <div> tag will be replaced the <iframe> video player -->
<div id="player"></div>
<script>
// This code loads the Dailymotion Javascript SDK asynchronously.
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//api.dmcdn.net/all.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
}());
// This function init the player once the SDK is loaded
window.dmAsyncInit = function()
{
// PARAMS is a javascript object containing parameters to pass to the player if any (eg: {autoplay: 1})
var player = DM.player("player", {video: "x1bpnpt", width: "640", height: "360", params: {autoplay: 1}});
// 4. We can attach some events on the player (using standard DOM events)
player.addEventListener("apiready", function(e)
{
e.target.play();
});
};
</script>
http://jsfiddle.net/WpbJH/
But if I embed it directly in iframe then it works (it also displays some errors but not the ones from above):
<iframe src="http://www.dailymotion.com/embed/video/x1bpnpt?api=true&autoplay=1" width="640" height="360" frameborder="0"></iframe>
http://jsfiddle.net/MWhdC/
What is wrong?

As i am looking on it , js file is not proper loaded , please look at
e.src = document.location.protocol + '//api.dmcdn.net/all.js'; line
document.location.protocol prefix domain infront of //api.dmcdn.net/all.js .
So please look at it and let me know .

After few research, I found what cause this issue.
The video they are using as example gets report from third party advertising group, and need to report to it every step of the video.
Upload a video of your own, and use the id you get from it, you will see that you will not have console errors.
Hope that was helpful.

Related

Opening a suggested video using the same player instead of in YT

I put a video player using the latest iFrame API from YouTube inside a website, however when I click a suggested video, instead of reusing the same player, it opens YouTube instead.
I didn't find any options to not make it go to YouTube each time, is there any?.
I used iframe API of youtube last month. I sometimes faced the same issue. But the issue was resolved by creating a iframe from the javascript. Please follow the below steps. I hope this will solve your problem.
Place a tag in your web page and write a javascript as shown below:
1 . Add a div element with id = "player" in your webpage.
<div id="player"></div>
In the Javascript part:
2. Add a script to load iframe player API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
3.. Create an iframe.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '320', //You can change height and width as needed
width: '480',
videoId: [video ID you want to load],
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onPlaybackRateChange': onPlayerPlaybackRateChange,
'onError': onPlayerError,
'onApiChange': onPlayerApiChange,
}
});
}
You can handle events by using the below functions.
function onPlayerStateChange(event){};
function onPlayerReady(event){};
function onPlayerPlaybackQualityChange(playbackQuality){};
function onPlayerPlaybackRateChange(playbackRate){};
function onPlayerError(e){};
function onPlayerApiChange(){};
Reference: https://developers.google.com/youtube/iframe_api_reference

PhoneGap iOS can't play video using HTML 5

I'm building phonegap app and I need to play video in it. I know in order to play video on Android, I need to use one of the plugins available, but to play video on iOS, I can use HTML 5 video tag. I have these lines of code:
<div id="video">
<video id="video01" width="300" height="300" controls>
<source src="images/test2.mp4" type="video/mp4" />
</video>
</div>
I can see "video box", but I cannot play video for some reason. In console I don't see any errors.
Video I'm using is from this page: http://www.quirksmode.org/html5/tests/video.html
And in iPhone Safari I can load MP4 version from that page without any problems.
I know it has been a while, but I was looking at some of my old questions, and I've noticed that I completely forgot to post solution to my problem.
In the end I've managed to fix the issue using Cordova File api, and solution looks smth. like this:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
console.log("gotFS");
getFolder(fileSystem, "video", function(folder) {
filePath = folder.toURL() + "\/" + "videotest.mp4";
playVideo(filePath);
}, function() {
console.log("failed to get folder");
});
},
function() {
console.log("failed to get filesystem");
});
function playVideo(uri) {
var player = document.getElementById("videoPlayer");
var source = document.createElement("source");
source.src = uri;
source.type = "video/mp4";
player.appendChild(source);
player.load();
}

YouTube iframe api behavior on Chromecast

Trying to get a YouTube video playing on Chromecast, not using the YouTube receiver but simply the iframe YouTube api. When the receiver url is loaded in a desktop chrome browser it plays ok but when the same url is loaded onto Chromecast I get the message 'This video is currently unavailable - Learn More'. If I keep trying to get the widget, once created, to play different videos it sometimes also says 'The Adobe Flash Player is required for video playback'.
The widget is created in the onYouTubeIframeAPIReady() callback using new YT.Player as shown in the docs. Maybe I'm confused but I thought the iframe api was html5 based, not flash based. Has anyone successfully achieved this or is this unsupported on Chromecast, hence the weird behaviour? I also stumbled across this http://www.youtube.com/html5
Here's the code I'm currently using on my receiver. The message handling (both directions) is hit and miss, and I'm currently working through that ... but the loading of the iFrame library, the embedding of the video, etc. all works. If it doesn't work on your end, we can start to investigate how your setup might be different. I've tried to add comments where it might be helpful.
<html>
<head>
<script src="https://www.gstatic.com/cast/js/receiver/1.0/cast_receiver.js">
</script>
<script type="text/javascript">
// first create our receiver object and our channel handler
var receiver = new cast.receiver.Receiver('{YOUR_APP_ID}', ['ChromecastYoutube'],"",5);
var ytChannelHandler = new cast.receiver.ChannelHandler('ChromecastYoutube'); // 'using 'ChromecastYoutube' as my dev namespace. Wouldn't really be that in production.
ytChannelHandler.addChannelFactory(receiver.createChannelFactory('ChromecastYoutube'));
ytChannelHandler.addEventListener(
cast.receiver.Channel.EventType.MESSAGE,
onMessage.bind(this)
);
receiver.start();
window.addEventListener('load', function() { // we won't try to load the iframe libraries until the chromecast window is fully loaded.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '562',
width: '1000',
videoId: 'jLlSqucqXB0',
playerVars: { 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onPlayerStateChange': onStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('annotation').innerHTML="We're ready to go";
}
function onStateChange(event) {
switch (event.data) {
case YT.PlayerState.ENDED:
// TODO let sender know we're done, then close casting
break;
case YT.PlayerState.PLAYING:
// TODO let sender know we're playing
break;
case YT.PlayerState.PAUSED:
// TODO let sender know we're paused
break;
}
}
function onMessage(event) { // currently, any one of these will work, but subsequent ones seem to falter. Investigating...
ytBindings={"playVideo":player.playVideo(),"pauseVideo":player.pauseVideo(),"stopVideo":player.stopVideo(),"getStatus":player.getPlayerState()}
ytBindings[event.message];
}
</script>
<style>
#wrapper {
width: 1000px;
margin: 10px auto;
text-align: center;
}
#annotation {
color: #ffffcc;
font-size: 200%;
margin-top:25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="player"></div>
<div id="annotation"></div>
</div>
</body>
</html>
Current behavior: it now seems to be fixed with Chromecast firmware 16041 and if the country code is set correctly during Chromecast setup. See the latest comment here https://code.google.com/p/gdata-issues/issues/detail?id=5923
Old answer:
Here is the root cause of the issue: https://support.google.com/chromecast/answer/2995235?hl=en
Some videos may not play using Chromecast. Private videos, live content, and videos not approved for mobile playback will not work with Chromecast.
Hopefully this will change, kills a primary Chromecast use case.
I also ran into this issue and found the cause to be the fact that I was using html5 audio to play some sound effects just before the video began. Removing the sound effects made the youtube player work again.

Youtube "Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin" even if the same protocol is used

When embedding a Youtube playlist I am getting this error:
Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "http://www.mydomain.com". Protocols, domains, and ports must match.
I am not mixing HTTP with HTTPS anywhere, so I don't know why I am getting this error in the first place.
I have noticed that recently the Youtube embedded playlist is not displaying the embed image of the first video and just displaying a black screen with a 'Play All' button, and I am wondering if this is being caused by the above error.
Apparently it seems that the error given by chrome is a bug. In order to solve the black screen with 'Play All' button issue I used the Javascript API (instead of the iframe), like this:
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.cuePlaylist({'listType':'playlist','list':'PLE2714DC8F2BA092D'});
}
</script>
</body>
</html>
Thanks to #jlmcdonald for the answer, as indicated here: Youtube embedded playlist diplays playall button instead of the first video
this issue is quite apparent to the Youtube service, basically Youtube can be only accessed through https, http is not allowed now, just change your 'http' to "https"...that's the solution

Youtube IFrame API onError fires with error code 150 for videos from Vevo

Let me explain my scenario. I want to use Youtube IFrame API to embed some videos on my website.
I tested the video with id wdGZBRAwW74 (https://www.youtube.com/watch?v=wdGZBRAwW74) on this page: Youtube IFrame Player Demo. And it works OK.
I try this example code:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'wdGZBRAwW74',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function onPlayerError(event){
console.log(event.data);
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
with some virtual host domains on my localhost and i got result:
with domain app.centaur.com/youtube/index.htm: IFrame API work OK, the video play without problems.
with domain app.music.com/youtube/index.html: IFrame API work OK, but the video can not play, API fires onError with error 150 and the embedded player show message "This video contains content from VEVO, who has blocked it from display on this website. Watch on Youtube"
with domain app.musiccentaur.com/youtube/index.htm: like first case, everything work ok
with domain app.centaurmusic.com/youtube/: like first case, everything work ok
As i know error 150 stand for "The owner of the requested video does not allow it to be played in embedded players". But i see it still work in case 1, 3, 4, so what is it mean ?
Seem all of videos by Vevo related to this problems. I'm not sure if Vevo defined some policy for embedding their videos.
Maybe the problem come from my domain music.com, but i'm not sure there is some rules of domain to embed Vevo's video on websites.
What if i buy a domain for my website then i got error 150, this is so bad. :(
Is there anyone deal with this before? Please give me some solutions. Thanks in advance.
Note: this error only occurs on Vevo's videos.
Content owners are allowed to set up a white/black list of domain names on which embedding is allowed/denied. There is no way to work around these restriction.
This blog post has a bit more info about content restrictions in general: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html

Resources