I'm trying to embed a YouTube player into my webpage as below.
The problem I'm having is, the player initially loads and plays the first video fine, but when .loadVideoById is called the player looks to load the video (video title text changes) but then gets stuck on a black screen instead of playing.
This is only happening on Android, with the HTML5 player (both Chrome and the default browser) since updating my phone to Android 4.3, having previously been fine on 4.2.
It works fine through a desktop chrome with the useragent set to fake an Android.
I've also tried on two other Android phones and are having exactly the same problem on both (both are also 4.3). I'm also getting the same behaviour intermittently, using the Google Code Playground Example Youtube Player.
If I attach the ADB Chrome remote debugger, I can see the player get stuck in the buffering state, although video fragments are being downloaded, as expected.
Has anyone experienced anything similar? Or has any suggestions?
Code:
<div id="ytwrapper">
<div id="player" >
</div>
</div>
<script type="text/javascript">
var ytplayer;
2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
3. This function creates an (and YouTube player)after the API code downloads.
function onYouTubeIframeAPIReady()
{
ytplayer = new YT.Player('player', { width: 1280,
height: 720,
videoId: 'M7lc1UVf-VE',
frameborder:0,
events:
{
"onReady": onYouTubePlayerReady,
"onStateChange": onytplayerStateChange,
"onPlaybackQualityChange": onYTQchange,
"onError": onYTError
}
});
}
function loadnextvid()
{
ytplayer.loadVideoById(vids[currentvid],0, vqs[currentvid]);
}
function onYouTubePlayerReady(playerId)
{
loadnextvid();
}
</script>
I had the same issue. Looks like the only way to fix this for the moment is to destroy and recreate the player instance.
I found this solution here: https://code.google.com/p/gdata-issues/issues/detail?id=5273
Works for me Android 4.4, iOS7.
if (player != null) {
player.destroy();
player = null;
}
player = new YT.Player('divplayer', {
width: '100%',
height: '100%',
videoId: video_id,
playerVars: { 'autoplay': 0, 'playerapiid': 'ytPlayer', 'border': 0, 'hd': 1, 'version': 3, 'rel': 0, 'color' : 'red' },
events: {
'onReady': onPlayerReady
}
});
Related
The ads are not displayed when accessing the site content through the iPad, iPhone and android.
The video usually works the problem is only the ads that do not display .
Has anyone experienced this problem?
Thank you for your attention
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-player', {
height: '400',
width: '100%',
playerVars:{
autoplay:1,
showinfo:0,
wmode:'transparent',
controls:1
},
videoId: list_video[0],
events: {
'onReady': onPlayerReady,
}
});
}
<div id="youtube-player">
Player do Youtube
</div>
I don't think that this is a problem. It's up to Google to decide how, where and when display an ads. This imply that:
If an ads is served using a specific technology (like Flash), then this ads could not be seen on some platform (like Android)
If an ads is targeted on a user-agent-base it cannot be seen everywere
and so on...
That's to say, if you are using the official API you are ok (despite of the ads' behavior).
I'm trying to play a video on Android and having some weird issues, I've stripped my code right back to the following to try and separate it from any view issues elsewhere in my app...
the file does seems to be loading, the following comments are the console log which shows it has the video file size and playable duration. However, the playback controls show 0 length, and just a black screen. The video is an mp4, it plays fine, I can only assume the emulator/devices I've tried this on support the format and it's not corrupt, as they are able to read it's duration... what else could stop it playing?!
var file = Ti.Filesystem.getFile('file:///data/data/com.app.applite/app_appdata/master/D9E3BC7A_225C_458B_B298_C4.mp4');
console.log('Size: '+file.size); // Size: 269245
var activeMovie = Titanium.Media.createVideoPlayer({
url : file.nativePath,
backgroundColor : 'blue',
movieControlMode : Titanium.Media.VIDEO_CONTROL_FULLSCREEN,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FIT,
fullscreen : true,
autoplay : true
});
activeMovie.addEventListener('loadstate', function(evt) {
console.log( JSON.stringify(evt));
// "playableDuration":8315 Correct duration!!!
// {"type":"loadstate","source":{"autoplay":true,"currentPlaybackTime":0,"bubbleParent":true,"playableDuration":8315,"rect":{"height":854,"y":0,"x":0,"width":480},"keepSc reenOn":false,"url":"file:///data/data/com.app.applite/app_appdata/master/D9E3BC7A_225C_458B_B298_C4.mp4","size":{"height":854,"y":0,"width":480,"x":0},"volume":1," endPlaybackTime":8315,"backgroundColor":"blue","playing":true,"playbackState":1,"mediaControlStyle":2,"duration":8315,"movieControlMode":2,"scalingMode":2,"initialPlaybac kTime":0,"loadState":1,"backgroundRepeat":false,"movieControlStyle":2,"children":[],"fullscreen":true,"_events":{"loadstate":{}}},"currentPlaybackTime":0,"loadState":0,"b ubbles":true,"cancelBubble":false}
activeMovie.play();
});
// Tried with and without these, makes no difference
activeMovie.show();
activeMovie.play();
I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.
I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.
Have you checked out mediaelement.js?
Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...
Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.
I got some problem to implement HTML5 video both on iPhone and Android.
I would like to remove the HTML5 video controller slider while the videos is playing.
The purpose is to make user watch the video from start until end without jumping or stop the video.
What you are asking may not be possible . But try this
Set control=false for video tag
Implement your own controls http://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/
Bot since your target is iphone/andriod i doubt if it's possible
You can try this tutorial to build your own player, so you can get rid of anything you don't want.
try this:
<body >
<video id="video" src="BO_VS_ST_MT1.webm" width="480px" height="270px" autoplay controls >
</video>
<canvas width="400" height="300" style="border: 1px solid black;" ></canvas>
<script language="Javascript">
window.onload = function(){ initCanvas(); }
var context;
function initCanvas(){
var video = document.getElementsByTagName("video")[0];
var canvas = document.getElementsByTagName("canvas")[0];
context = canvas.getContext("2d");
video.addEventListener("timeupdate", paintFrame, false);
}
function paintFrame(){
context.drawImage(video, 0, 0, 400, 300);
}
</script>
But Ithink It is gonna look so slow :/
I don't believe that you can do this on the iphone - they have strict settings . IT seems to be that the first time a video loads, you are unable to actually play the video without the user interacting with the video frame, which means that it's impossible to click this element if it's not visible. I think it's a waste of processing power to do that anyway.
In Titanium 1.6.1 I can get Android 2.2 to play video on Kitchen Sink, but have been unable to get video to play outside of Kitchen Sink on Android. I'd like the smallest code snippet possible to play a video in Android.
In my current attempt I tried using the movie_embed.js from Kitchen Sink in a new project's app.js file like this:
var btnPlayMovie = Titanium.UI.createButton({
text: 'Click me',
left: 10,
height: 30,
top: 100
});
btnPlayMovie.addEventListener('click', function(){
var win = Titanium.UI.createWindow({
url:'./movie_embed.js',
title:'Test movie'
});
//various methods of opening the window win.open(), Ti.UI.currentTab.open(win, {animated:true}), etc
//none have worked either erroring or showing a black screen.
});
it works in iPhone, but not in Android 2.2
I recommend not trying to do video in Titanium.
We have video working in 1.6.2. Right now we only have 2 videos playing in it. What will play is very limited. I'm guessing it is encoding issues. Also the video opens in a new Window, we can't change the url of an existing video, and have other issues.