Assuming I have the video IDs can I access a still of the video?
I have read of the media API and the read functions for thumbnailURL and videoStillURL but have no idea how to implement.
Are there examples of using a still from an asset given the ID?
Yes, most all of the Media API read methods will return the videoStillURL and thumbnailURL if you specify them in the video_fields, or just return all fields. Once you get the URL, you can use it as the src value for an tag or you can browse to the URL if you want to download the image. There are many examples on the Brightcove sites of using these URLS to populate image tags src values -- see http://solutions.brightcove.com/bcls/AnalyticsAPI/most-popular-videos.html for example.
Yes, you can get thumbnail image url of a BrightCove video from player instance. Which means when a player is loaded and we get instance object of player (e.g. playerInstance), we can get the thumbnail url from playerInstance.mediainfo.poster.
mediainfo can't be called directly when player is loaded because video information loads after the player is initialized so we need to wait for mediainfo object to have required information. Hence we need to call playerInstance.mediainfo.poster on loadeddata event. Please refer the code example underneath.
// After loading BrightCove script
i.e. https://players.brightcove.net/[ACCOUNT_ID]/[PLAYER_ID]_default/index.min.js
// Initialise player using videojs object
let playerInstance;
videojs.getPlayer('[ID_PROVIDED_IN_BRIGHTCOVEPLAYER_ELEMENT]',).ready(() => {
playerInstance = this; // Assigning player instance
playerInstance.on('loadeddata', () => {
console.log(playerInstance.mediainfo.poster); // Thumbnail URL
});
});
But if you need thumbnail image before you initialise Brightcove player, there is no exact way to get it from the same API. There is another API provide by brightcove, please refer the same. https://apis.support.brightcove.com/playback/code-samples/thumbnail-grid.html
Related
How I can get the image that the user just uploaded to display in another element on the same page? I'm using the storeAsFile property within the filePond options.
As note, I'm currently displaying the image with ImagePreview plugin within the filepond input instance, but i want to show this image on another part of the page. Hope i'm being clear enough.
Found the solution,
pondPhoto.on('addfile', (error, file) => {
// this object contains the file info
console.log(file.file)
// you can construct a blob object
const imageSrc = URL.createObjectURL(file.file)
// then you may attach it to any image in your DOM
document.querySelector('img').setAttribute('src', imageSrc)
})
In a controller I return a view with data. Along with this data, how can I also send back an image?
The image needs to be loaded via Storage as it's private, I get the image and build an image response in a class.
How can I also return this image response along side my data?
I've tried setting the response to a var in my data and displaying that in img src but it fails to load the image.
Normally I work with url. Storage::url('file.ext') give you a lot of possibility. There is also a way to create temporary url with this method within the Storage facade $url = Storage::temporaryUrl('file.jpg', now()->addMinutes(5)); You have to indicate when the url should expire.
There is another method that I use with drawboard.
You first have to get the content of your image. I don't remember, but I think the get() method of storage do the job. Maybe it's a bit more complex.
Whatever, you have to get the raw data of the image, put it into a variable and send it to the view.
Then, in the src of the image, you do this:
<img src="data:image/png;base64, {{$varToRawData}}" />
Be sure to use the right image/extension
I use one attribute based on Video domain where I add the Youtube urls to be load in the WWSD or SDPanels.
I got my Youtube ID and everything is OK in Android, but in iOS the video is not load and keep Loading message.
Anyone know if is need do something more for iOS in GNX to solve it ?
thx.
Currently Youtube links to be used in the control Video for iOS must use the watch?v=VIDEOID URL format, like in: http//www.youtube.com/watch?v=8GzZ-kMHqUA . youtu.be host name is also accepted.
iOS generator internally converts the URL to the http//www.youtube.com/embed/VIDEOID format removing any additional parameters.
If you want to include additional parameters, you can use the solution provided by Franklin.
For iOS we did a work around because we found the same problem.
In youtube you can find the URL of the video to play directly. For example: https://www.youtube.com/embed/8GzZ-kMHqUA?autoplay=1
After having that url for the video you can create an SDPanel with a variable of type Component. In the list of the video, you can call this SDPanel and load the url of youtube video. This way the user will have the ability to play the video from a the web page that will trigger the native video player in iOS without an extra tap.
Code example:
Event "GridTapFromWWSD"
Composite
PanelYoutubePlayer(VideoURL)
EndComposite
EndEvent
In the panel: PanelYoutubePlayer you ll put a &variable based on the Component domain and in the Layout give this variable 100% (height, width) and set it as ReadOnly = true.
Assuming you have a table like with: VideoID | VideoURL
You can get the VideoID on the parm:
parm(in:&videoID);
And in the panel create in the events the following:
Event Start
for each
where VideoId = &videoID
&videoUrlComponent = VideUrl
endfor
EndEvent
This way you can navigate your db table to get your video URL.
&VideoID -> Same Domain as your VideID att
&VideUrlComponent -> ComponentDomain
I need to upload the photo of a user with his details from asp.net mvc3 razor view. The image selected by the user has to be shown as thumbnail before submitting the form.
The model of the view contains a byte array property called Photo. On page load i am converting this byte array to base 64 string and showing it in . this is working properly .
Now i need to show the thumbnail of the image selected by the user. And when he clicks on submit button i need to bind the selected image to the model property Photo.
After googling , i came to know that showing thumbnail is not possible until I upload that image. I tried Uploadify but its UI behavior is not what i am expecting. I also tried the article http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspx, but it is also not suitable in our scenario.
can anyone help me by sharing their experience achieving this scenario.
Thanks in advance.
You could achieve this using HTML5 File API. Take a look at the following article and more specifically the Showing thumbnails of user-selected images section which illustrates an example of how you could achieve that without uploading the image to the server.
And if you want to support legacy browsers that do not yet support the HTML5 File API you could use the jQuery.form plugin which allows you to easily send the contents of a given form to the server using AJAX and it also supports file uploads. So basically you could subscribe to the .change() event of the file input or the .click() event of some see thumbnail ... button and then submit the form to a controller action using AJAX:
$('#myform').ajaxSubmit({
url: '#Url.Action("thumbnail")',
success: function(result) {
// the result variable will contain the result of
// the execution of the Thumbnail action.
// could be a BASE64 encoded representation of
// the thumbnail you generated on the server and then
// simply set it to the src property of your preview `<img>`
// element using the Data Uri scheme
}
});
I have been using Backbone.js to act as a middleman between Wordpress (using the super rad JSON API plugin) and my front end.
Each of my Wordpress posts has a YouTube video ID attached to it, which is getting pulled back when I fetch the collection.
I am trying to work out the best point within the application to go out and parse the video ID to get the total video views.
This is code that is fetching the collection model:
parse: function(response) {
return response.posts;
}
And the following code is then rendering the appropriate view.
this.getCollection().each(function(model) {
var view = new App.Thumbnail.View({model: model});
var item = $(view.render().el);
this.container.append(item);
});
At some point in this process, I need the thumbnails to assign themselves the video count. This is the code I have for grabbing the YouTube view count:
function getYoutubeViewCount(videoID) {
$.ajax({
url: "http://gdata.youtube.com/feeds/api/videos/" + videoID + "?v=2&alt=json",
dataType: "jsonp",
success: function (data) { console.log(data.entry.yt$statistics.viewCount); }
});
}
So my question is, where do you think the best place to fetch the view count is? Should I create a sub-model that fetches the count? Or do it outside of backbone.js?
Any help would be beyond appreciated!
Thanks in advance,
Charlie.
The viewCount should be an attribute on your Video model subclass. You can load both the wordpress data for the video and the youtube count in parallel before instantiating your model, or you can instantiate your model with the data from wordpress while the youtube data is being fetched and latered applied. Once you get the view count from youtube, set it on the corresponding model instance. Have your view bind to the change:viewCount event on the model and re-render itself (or at least shove the view count into the appropriate element in the DOM) once this data is loaded.
As to WHEN you do this, probably you should start fetching the view count(s) in the background as soon as you have your basic Video model instance created and populated with its basic attributes from your wordpress data source. Or you can choose to load view counts later lazily when the video is played or scrolled into the viewport or moused over or whatever.