The following code loads the video when clicking on a link but how can I get the video to actual play when clicking instead?
<a class="test" onClick="BCL.addPlayer('video_player', '2102405248001');" href="#">Test</a>
Thanks!
You will need to use the API for the VideoPlayer module. Have a look at the play() method. When onTemplateLoaded() is triggered, you can call Play(). Conversely, you may be able to set the video to autoStart. Check here for player config params.
Related
I have embedded a video into my site using the Ziggeo API. I am using Handlebars to populate the token to the ziggeo player:
<ziggeo id="zideo_player" ziggeo-width="560" ziggeo-height="315" ziggeo-playonclick="true" ziggeo-video={{this.token}}>
</ziggeo>
I know that the token is getting there because I can see it in the inspector.
The weird thing is, when I go into the inspector and change from ziggeo to ziggeoplayer, the video will show, but when I push those changes to Heroku, it again doesn't show.
It's as if the player is loading before the token is received and only by changing the name can I re-send the token.
This turned out to be an asynch (asynchronization) issue. The video was trying to load before it could send and receive information from Ziggeo's API. To solve this, I used a separate js file and then appended the video information after the document loaded.
After some more thought, I might have also been able to fix this by placing the Ziggeo API information at the bottom of the body in the index.handlebars file instead of in the head. I didn't have a chance to try this since the above trick worked, but it would probably look cleaner if it did.
v1 and v2 should both work on Heroku.
Benjamin, can you try replacing that HTML embedding code with JS code, which could then be delayed if really needed.
For example of same code in JS:
<script>
//ZiggeoAPI will work only with v1-rXY/ziggeo.js v2- will require v2 app to be created and code would look just a bit different
ZiggeoApi.Events.on("system_ready", function() {
var player = new ZiggeoApi.V2.Player({
element: document.getElementById("your_element_ID"),
attrs: {
width: 560,
height: 315,
theme: "modern",
themecolor: "red",
playonclick: true,
video: "{{this.token}}"
}
});
player.activate();
});
</script>
This would only fire once the Ziggeo system is loaded and ready. This means that it fires after the DOM is ready and page loaded so it should be before the {{this.video}} is available.
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
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
I am trying to detect a start click in jwplayer. I am embedding it via swfobject so the method is slightly different from the example in the api, http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16024/listening-for-player-events
I have tried
var flashvars = {
'file':'xxx',
'streamer':'xxxxxx',
'image':'xxxxx',
'plugins':'xxxxx',
'gapro.accountid':'xxxx',
'gapro.trackstarts':'xxxx',
'gapro.trackpercentage':'xxxx',
'gapro.tracktime':'xxxx',
'logo.file':'xxxxx',
'logo.link':'xxxx',
'logo.hide':'xxxx',
'logo.position':'xxxx'
};
jwplayer().onPlay(function() {alert('it has started'});
jwplayer() is not defined, how do I defined an object to detect the click?
The player is probably undefined because it hasn't been created yet. You should wrap your command in a callback from a DOM ready listener. Since you're using jQuery you can use its .ready() method (jQuery documentation):
$(document).ready(function(){
jwplayer().onPlay(function() { alert('it has started'); });
});
Just a note about jwplayer onPlay(), it doesn't necessarily happen from a click event, it fires whenever the video is played, which could be by clicking play, or by programmatically playing the video. All it's telling you is that the video is playing. (Corrected the syntax error)
I have a page where a user can upload a file along with some other input. Because I wanted this to be AJAX-like, I resorted to using an iFrame to accomplish this.
After the file is uploaded and an iFrame is loaded with a response page, I need to update a DIV outside of the iFrame with an AJAX call. The reason for separate updates, is that the result of the outside DIV depends on the input that the user provided with the file input.
Can this be done? Am I approaching this the wrong way?
Thank you!
UPD: Can the returned client code from within the iFrame "see" elements outside that iFrame?
Write your code in the onload event of the page loaded into the iframe. Then top will give you the top frame or parent will give you the parent frame.
Yes , it can be done. But you can do away with,the need for an AJAX-call , to update the outside the div.
Have your, servlet(assuming you are using JSP/servlets) that accepts the mutlipart request(the servlet that accepts the upload), return the intended response (to be shown on the refreshed iFrame), and ALONG WITH IT, the necessary information from the file input. This way you have all the necessary details on the client, in one response. A simple javascript function can achieve , updating the outer div with the information from the file input.