http://i.stack.imgur.com/4Qg6k.png
//Application Window Component Constructor
function hsVideoWindow(videoID) {
Ti.include('/ui/include/config.js');
var IMG_BASE = '/images/';
//alert(videoID);
//construct UI
var self = Ti.UI.createWindow({
viewName: 'videoWindow',
title: 'VIDEO',
navBarHidden:false,
layout:'vertical',
backgroundImage:backgroundImage,
zIndex: 0
});
var myVideoID = ('p4g9_R6cg7s');
var webView = Ti.UI.createWebView({
url: 'http://www.youtube.com/embed/' + myVideoID + '?autoplay=1&autohide=1&cc_load_policy=0&color=white&controls=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0',
enableZoomControls: false,
scalesPageToFit: false,
scrollsToTop: false,
showScrollbars: false
});
self.add(webView);
self.open();
return self;
}
//make constructor function the public component interface
module.exports = hsVideoWindow;
Can anyone help me to fix this ?
It is able to display only the youtube video's thumbnail. However it is unable to stream the video within the webview.
Related
PDFjs library working. But i got error: var pdfViewer = new PDFViewer({
i am import viewer.js like
Is there any information if this PDFViewer is departed or...
here is my code:
var container = document.getElementById('viewerContainer');
var viewer = document.getElementById('viewer');
var pdfViewer = new PDFViewer({
container: container,
viewer: viewer
});
$scope.pdfFindController = new PDFFindController({
pdfViewer: pdfViewer
});
$scope.pdfFindController.executeCommand('find', {
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: "myQuery"
});
pdfViewer.setFindController($scope.pdfFindController);
container.addEventListener('pagesinit', function () {
pdfViewer.currentScaleValue = 'page-width';
});
PDFJS.getDocument(MY_PATH_TO_THE_PDF).then(function (pdfDocument) {
pdfViewer.setDocument(pdfDocument);
});
I embed Youtube videos in my angular app using two directives which make use of the YouTube Iframe API. The first loads the library async
angular.module('myApp')
.service('youTubeService', function($rootScope, $window) {
var self = this;
self.ready = false;
$window.onYouTubeIframeAPIReady = function () {
self.ready = true;
console.log("Youtube service ready");
$rootScope.$broadcast('youTubeServiceReady', true);
};
var tag = document.createElement('script');
tag.src = '//www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
I then embed the video using the javascript library
angular.module('myApp')
.directive('youtube', function (youTubeService) {
return {
link: function (scope, element, attrs) {
var player;
var playerReady = false;
var playerState;
var callback;
var carouselScope = element.parent().parent().scope();
function createPlayer() {
player = new YT.Player(element[0], {
height: attrs.height,
width: attrs.width,
videoId: attrs.youtube,
playerVars: { 'start' : attrs.starttime, 'end' : attrs.endtime, 'origin': 'https://', showinfo: 0, modestbranding: 1 },
events: {
onReady: function () {
playerReady = true;
// if (callback !== null) {
// callback();
// }
},
onStateChange: function (event) {
//console.log("Time:" + getCurrentTime() + ", Duration:" + getDuration() );
playerState = event.data;
if (playerState === YT.PlayerState.PAUSED) {
carouselScope.play();
}
}
}
});
}
if (youTubeService.ready) {
createPlayer();
} else {
scope.$on('youTubeServiceReady', function () {
createPlayer();
});
}
...
This was working for months up until yesterday but now I get the following video as my embed in all desktop browsers as documented here
https://support.google.com/youtube/answer/6098135?hl=en-GB
My problem is I can't figure out what I should be changing because as far as I understand the iframe api is the correct one. Does anyone know what I should be changing?
So we were having the exact same issue with our site.
It turns out that our client, which uses code very similar to yours above is functioning correctly. Our problem ended up being the way in which we were adding videos and video meta data to our database.
This might not be your issue, but we were using
http://gdata.youtube.com/feeds/api/videos/<video id>?v=2&alt=json
to add videos to our system. As this turns out to be a deprecated endpoint, we had to upgrade to the v3 system which is explained here: https://developers.google.com/youtube/v3/docs/videos/list
What I want to do is create a video gallery with n video.
Add n view in a ScrollView, a view for each video, and load into every view a picture from the corresponding video (waiting for the loading of each video). While holding down (TouchStart) on a view will be loaded in the view (preview) other images of the video (so to display the video preview directly in the mini view) until the finger is released (touchEnd).
So far , is ok, my problem is that I want by pressing (CLICK) on the mini-view the video was displayed in full screen!
Here is my code
//****************************************************************************************************************
var arr_vidplayer_VARIE = [];
var arr_vidplayer_VARIE_duration = [];
var arr_vidplayer_VARIE_cont = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var timer_VARIE = null;
var num_video_VARIE = 37;
var arr_view_VARIE = [];
var left_VARIE= -200;
var top_VARIE = -100;
var actual_video_VARIE = 1;
//****************************************************************************************************************
var win = Ti.UI.createWindow({
backgroundColor : 'white',
fullscreen : true
});
var scroll_VARIE = Ti.UI.createScrollView({
width : 1024,
height : 700,
top : 0
});
scroll_VARIE.addEventListener("scroll",function(e){
clearInterval(timer_VARIE);
});
//****************************************************************************************************************
function START_VARIE(){
if(actual_video_VARIE <= num_video_VARIE){
if((actual_video_VARIE-1) %4 == 0){
top_VARIE+=150;
left_VARIE=45;
}else{
left_VARIE+=245;
}
CREATE_VIDEO_VARIE(top_VARIE,left_VARIE,actual_video_VARIE);
}
}
function CREATE_VIDEO_VARIE(top,left,id){
var myurl = "/video/"+id+".mov";
var video = Titanium.Media.createVideoPlayer({
url : myurl,
mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
fullscreen : true,
id : parseInt(id),
autoplay : true,
//zIndex : 9999999999999
//visible : false
});
video.addEventListener("loadstate",function(e){
END_LOAD_VARIE(e.source.id,e.loadState);
});
arr_vidplayer_VARIE.push(video);
var view_video = Ti.UI.createView({
width : 200,
height : 120,
left : left,
top : top,
id : parseInt(id),
borderColor : "black"
});
view_video.addEventListener("touchstart",function(e){
var i = parseInt(e.source.id) - 1;
timer_VARIE = setInterval(function(e){
if(arr_vidplayer_VARIE_cont[i] < arr_vidplayer_VARIE_duration[i]){
arr_vidplayer_VARIE_cont[i]++;
var img = arr_vidplayer_VARIE[i].thumbnailImageAtTime(arr_vidplayer_VARIE_cont[i],Titanium.Media.VIDEO_TIME_OPTION_EXACT);
if(img == "[object TiBlob]"){
try{
arr_view_VARIE[i].children[0].image = arr_vidplayer_VARIE[i].thumbnailImageAtTime(arr_vidplayer_VARIE_cont[i],Titanium.Media.VIDEO_TIME_OPTION_EXACT);
}catch(e){
clearInterval(timer_VARIE);
}
}
}else{
arr_vidplayer_VARIE_cont[i] = 0;
}
},200);
});
view_video.addEventListener("touchend",function(e){
clearInterval(timer_VARIE);
});
view_video.addEventListener("click",function(e){
arr_vidplayer_VARIE[parseInt(e.source.id)-1].play();
Ti.API.info("play "+e.source.id);
});
var image_video = Ti.UI.createImageView({
width : 200,
height : 120,
left : 0,
top : 0,
id : parseInt(id),
});
var activity = Ti.UI.createActivityIndicator({
style : Ti.UI.iPhone.ActivityIndicatorStyle.DARK
});
view_video.add(image_video);
view_video.add(activity);
//win.add(video);
activity.show();
arr_view_VARIE.push(view_video);
scroll_VARIE.add(view_video);
}
function END_LOAD_VARIE(id,state){
if(parseInt(state) == 3){
arr_view_VARIE[id-1].children[1].hide();
arr_view_VARIE[id-1].children[0].image = arr_vidplayer_VARIE[id-1].thumbnailImageAtTime(1,Titanium.Media.VIDEO_TIME_OPTION_EXACT);
arr_vidplayer_VARIE_duration.push(parseInt(arr_vidplayer_VARIE[id-1].getDuration()/1000));
actual_video_VARIE++;
START_VARIE();
}
}
//****************************************************************************************************************
START_VARIE();
win.add(scroll_VARIE);
win.open();
//****************************************************************************************************************
Appcelerator Documentation declare that fullscreen property on iOS, before the movie player's view is visible has no effect. Try:
var video = Titanium.Media.createVideoPlayer({
url : myurl,
mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
fullscreen : false,
id : parseInt(id),
autoplay : true
});
and
view_video.addEventListener("click",function(e){
view_video.setFullscreen(true);
arr_vidplayer_VARIE[parseInt(e.source.id)-1].play();
Ti.API.info("play "+e.source.id);
});
Using Youtube API V3, I can extract the thumbnails of videos from a user's activity feed (using the activities list from the api).
What I am trying to achieve is, when the user clicks on the video, the video should be played. I have looked at iframes. however the activities list on the api, does not show how to get the url for the video, but a different the Videos resource shows a player.embedHtml field, however I am confused, how to integrate it to my code.
var activityId, nextPageToken, prevPageToken, videoSnippet;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsactivityId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsactivityId() {
// https://developers.google.com/youtube/v3/docs/channels/list
var request = gapi.client.youtube.activities.list({
// mine: '' indicates that we want to retrieve the channel for the authenticated user.
home: 'true',
part: 'snippet'
});
request.execute(function(response) {
//structure of content.details
//https://developers.google.com/youtube/v3/docs/channels#resource
console.log(response);
activityId = response.items[0].id;
requestVideoPlaylist(activityId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(home, pageToken) {
$('#video-container').html('');
var requestOptions = {
home: 'true',
part: 'snippet',
maxResults: 12
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.activities.list(requestOptions);
request.execute(function(response) {
var activityItems = response.result.items;
if (activityItems) {
// For each result lets show a thumbnail.
jQuery.each(activityItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no activities on your feed');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
var titleEl = $('<h4>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.default.url;
console.log(videoSnippet);
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
$('#video-container').append(div);
}
The activities list includes several activity types :
upload, like, favorite, comment, subscription, playlistItem, recommendation, bulletin, social ..
and only some kind of activities are related to a video. Then you can only retrieve the videoId from the contentDetails when the type of activity is related to a video. You can use the videoId to show the video.
https://developers.google.com/youtube/v3/docs/activities
You have a good example in "YouTube Topic Explorer". In this App you can retrieve the social activities and retrieve the videoId from this kind of activities
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/logged-in.js
$scope.social = function() {
$rootScope.topicResults = [];
$rootScope.spinner.spin($('#spinner')[0]);
youtube({
method: 'GET',
service: 'activities',
params: {
part: 'id,snippet,contentDetails',
home: true,
maxResults: constants.YOUTUBE_API_MAX_RESULTS
},
callback: function(response) {
if ('items' in response) {
$scope.videoIds = [];
$scope.personalizedTopics = [];
angular.forEach(response.items, function(activity) {
if ((activity.snippet.type == constants.SOCIAL_TYPE)&&(activity.contentDetails.social.resourceId.videoId)){
$scope.videoIds.push(activity.contentDetails.social.resourceId.videoId);
}
});
}
getTopicsForVideoIds();
}
});
}
and you have an example of how to show the video:
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js
function playVideo(container, videoId) {
var width = container.offsetWidth;
var height = container.offsetHeight;
new YT.Player(container, {
videoId: videoId,
width: width,
height: height,
playerVars: {
autoplay: 1,
controls: 2,
modestbranding: 1,
rel: 0,
showInfo: 0
}
});
I'm making an addon with builder.addons.mozilla, I've posted the main.js code below. The idea is, when I click the widget of the addon, it disables a script running at panelist-webiq-cdn.appspot.com/warptest by setting the disableWebIQ variable to true. Setting the variable works, but whenever the addon is installed, the setTimeout call in the script in the page doesn't work. Does adding a PageMod to a page disable setTimeout?
The code of the button script and myScript.js doesn't do much, and myScript.js doesn't run when you click the widget anyways, so I doubt it's what's disabling setTimeout in the page.
var ss = require("simple-storage");
ss.storage.enabled = true;
ss.storage.panelIdList = [];
const widgets = require("widget");
const data = require("self").data;
var player = widgets.Widget({
id: "player",
width: 16,
label: "PanelistWebIQ",
contentURL: data.url("buttons.html"),
contentScriptFile: data.url("buttonScript.js"),
onClick: function(){
if(ss.storage.enabled){
ss.storage.enabled = false;
pageMod.destroy();
}
else{
ss.storage.enabled = true;
pageMod = pageModModule.PageMod({
include: "*",
contentScriptWhen: 'start',
contentScriptFile: data.url('myScript.js')
});
}
}
});
var pageModModule = require("page-mod");
var pageMod = pageModModule.PageMod({
include: "*",
contentScriptWhen: 'start',
contentScriptFile: data.url('myScript.js'),
onAttach: function(worker){
var url = worker.url;
var newPanelId = '';
if(url.match(/^https?:\/\/panelist-webiq-cdn.appspot.com.*panelId=.*$/)){
var pattern = 'panelId=';
var index = url.indexOf(pattern);
var sub = url.substring(index + pattern.length);
index = sub.indexOf('&');
if(index==-1){
newPanelId = sub;
}
else{
newPanelId = sub.substring(0, index);
}
}
var list = ss.storage.panelIdList;
if(newPanelId){
var matchFound = false;
for(var ctr=0; ctr<list.length; ctr++){
var panelId = list[ctr];
if(panelId==newPanelId){
matchFound = true;
break;
}
}
if(!matchFound){
list.push(newPanelId);
}
}
worker.postMessage(list + '');
}
});
Apparently, if you have an alert in your script, that alert can disable future calls to setTimeout. I removed all alerts from my addon, and it worked fine.