Does anyone have a URL of a successful multivideo gallery using mediaelement.js where the same instance of MediaElementPlayer is reused and have it working with the Flash fallback for IE8 & 7?
I have partial success changing the setSrc as a function after the new MediaElementPlayer is created for the first time. This is robust for the HTML5 component but failing for the flash fallback. setSrc is consoling as not available in IE8 & 7. It fails to recognise the object.
Moving the setSrc to the "success" part of the new MediaElementPlayer does load the Flash fallback and HTML5 video as expected. On attempting to change the source of the player I have attempted to "destroy" and recreate the MediaElementPlayer object on the fly without success. I have not declared player using var=player so reasonably have expected to delete it but without success:
player = false;
delete player;
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', {
pluginPath: ''+basePath+'_Includes/JS/',
success: function (player, node) {
//set the size (for flash otherwise no video just sound!)
if($("#rg-gallery.smallGallery").length > 0){
player.setVideoSize(400, 225);
} else{
player.setVideoSize(640, 360);
}
player.setSrc([
{ src: mp4, type: 'video/mp4' },
{ src: webm, type: 'video/webm' }
]);
player.load();
player.pause();
//if the video plays stop the slideshow
player.addEventListener('play', function () {
videoPlaying.push('playing');
stopSlideshow();
}, false);
}
});
Research both here and on the web shows that others are attempting to try this type of dynamic gallery but I am unable to find an example that shows it as technically viable.
Any example URLs where someone's cracked it would be lovely. Thanks :)
Solved.
Created a JS variable of video code:
var playerView = '<video width="640" height="360" id="videoPlayer" class="video-js vjs-default-skin" poster="" controls preload="auto"><source id="mp4" type="video/mp4" src="" /><source id="webm" type="video/webm" src="" /></video>';
On initialization removed any DOM rendering of any existing player, set it to false and deleted it:
//remove any existing video player
$(".mejs-container").remove();
player = false;
delete player;
Appended new video view to DOM:
//add a new one
$(".rg-video").append(playerView);
Created new instance of player and set src and load as normal:
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', { ...
HTML5 video and Flash video fallback for IE8 & 7 now working as part of dynamic mixed media gallery.
Off for tea and medals.
:)
Related
I am trying to capture a screen image from a video, which src is on a different server. So far I got to blank image, which as far as I understand is expectable, because of the tainted canvas or CORS policy error if I give the video tag 'anonymous' crossorgin property. I am using html2canvas, but also tried and with simple canvas context like this:
let ctx = canvas.getContext('2d');
ctx.drawImage( video, 0, 0, canvas.width, canvas.height );
let image = canvas.toDataURL('image/jpeg');
and with html2canvas, trying multiple combinations of options with Vue proxy configurated to the server of the video:
let el = this.$refs.videoPlayer
el.setAttribute('crossOrigin', 'anonymous')
this.output = (
await html2canvas(el, {
allowTaint: true,
useCORS: true,
proxy: '/two',
async: true,
foreignObjectRendering: true,
})
).toDataURL()
Is there any workaround around this? Because I have it working with a local video and now this is quite unfortunate. Is it possible to first download the video on the user system and then play it in order to take the screenshot?
Edit:
The only working workaround I found is to download the video as Blob via axios and then use it, which works perfectly, but uses the user cache for the video.
On my custom cast receiver app, in my mediaManager.onEditTracksInfo callback, I enable/disable sideloaded captions as below:
mediaManager.onEditTracksInfo = function (event) {
if (!event.data || !event.data.activeTrackIds) {
return;
}
// if sideloaded tracks are available, show/hide those
if (sideloadedTracksAvailable) {
updateSideloadedTracksVisibility(event);
} else {
updateEmbeddedTracksVisibility(event);
}
onEditTracksInfoOrig(event);
};
updateSideloadedTracksVisibility = function (data) {
var mediaInformation = mediaManager.getMediaInformation() || {};
// disable currently enabled sideloaded TTML or VTT, if any
mediaPlayer.enableCaptions(false, cast.player.api.CaptionsType.TTML);
mediaPlayer.enableCaptions(false, cast.player.api.CaptionsType.WEBVTT);
enableActiveTracks(data.activeTrackIds, mediaInformation.tracks || []);
}
enableActiveTracks = function (activeTrackIds, tracks) {
// loops over tracks and if requested to be enabled calls
// mediaPlayer.enableCaptions(true, trackType, tracks[i].trackContentId);
}
Below is is what the <video> element looks like in receiver app DOM. As soon as sideloaded tracks are loaded into mediaManager in onLoad(), a track element is added to DOM with src set to url of first track in the tracks-array. Then whenever I call editTracksInfo with activeId of a track, a new track element gets appended to <video> eleement and gets removed whenever I turn captions off.
<video id="videoEl" src="blob:http%3A//blob-url-here" cast-captions-879553="true" crossorigin="anonymous">
<track src="http://vtt/url/here/file.vtt" id="1" label="undefined" srclang="en-US" kind="subtitles"></track>
<track src kind="captions"> <!-- this gets added upon enabling a track, and removed when disabling tracks -->
</video>
Captions are working fine but I notice that whenever I switch to a sideloaded VTT trackId, chromecast shows two caption streams with same content. Is this a known issue or is my code doing something wrong? It only happens with sideloaded vtt tracks. Sideloaded TTML and embedded vtt look fine. I checked the contents of sideloaded vtt file, and it doesnt have duplicate captions strings.
So I finally figured this out. Apparently Media Player Library handles sideloaded VTT tracks on its own. When using MPL, in the overridden onEditTracksInfo event handler, we only have to take care of enabling/disabling embedded TTML/VTT and sideloaded TTML. Sideloaded VTT is handled automatically by MPL upon calling default event handler (onEditTracksInfoOrig). This also explains why a <track> element with vtt url was automatically appended to <video> element. This element was created by MPL. This caused double captions to show because I and MPL both were enabling the VTT track. I changed my code as below:
enableActiveTracks = function (activeTrackIds, tracks) {
// loops over tracks and if enable TTML track if requested
if (trackType === 'ttml') {
mediaPlayer.enableCaptions(true, trackType, tracks[i].trackContentId);
}
}
Unfortunately, this is not documented in MPL documentation or custom receiver documentation. The documentation needs to be updated to make this information easy to find.
I have a <div> containing a <video> element, and a <ul>. Clicking on an element in the <ul> causes an AJAX call to update the contents of the <div>. On my first attempt, the first video would load correctly, but then clicking on a different link would only load the poster, but not the controls. After some Googling, I found the solution to that, which leaves me with the following AJAX call:
$.ajax({
// each video has its own unique ID
url: "/Video?id=' + id,
success: function (data) {
$('#containing_div').html(data);
// necessary to re-load video player controls
_V_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" });
}
});
Adding the initialization call to _V_ seemed to help matters somewhat: now when I switch videos, the "play" control appears as expected, and I can play a video. However, once I do, when I switch to a different video, the controls are now gone again. Furthermore, there are weird random errors: if I change videos a few times, suddenly the controls disappear for no apparent reason. Also, occasionally, a second after I switch to a new video, the video poster disappears completely.
Clearly, some "magic" happens in Video.js on page load that is not being triggered by the AJAX call, but I haven't been able to figure out what that is. There's nothing wrong with the <video> tags because initially they were all in-line in the page, and they were being hidden/shown by changing their opacity, and that worked fine (the reason I want to move to AJAX is the page size is huge when all the videos are loaded in-line).
It turns out the solution was to call .destroy() (an undocumented API function) on the outgoing video:
if( currentVideoId ) {
_V('video_' + currentVideoId).destroy();
}
$.ajax({
// each video has its own unique ID
url: "/Video?id=' + id,
success: function (data) {
$('#containing_div').html(data);
// necessary to re-load video player controls
_V_('video_' + id, { "controls": true, "autoplay": false, "preload": "auto" });
currentVideoId = id;
}
});
Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.
For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z
It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z
I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".
Here is my upload function:
function uploadPhoto() {
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
options.mimeType = 'image/jpeg';
var params = new Object();
if(logged_in == true) {
params.unique_id = app_unique_id;
params.secret_key = user_secret_key;
}
options.params = params;
loadingStart();
var ft = new FileTransfer();
ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);
}
imgURI value looks like this:
file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg
Any insight is appreciated.
Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.
To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.
Here are two examples:
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source,
correctOrientation: true });
}
The problem is not PhoneGap but iPhone. The iPhone was designed to be used as a wide lens camera. Turn the phone sideways when taking pictures or capturing video if you intend to view them on desktop. Your phone will display them correctly, because it "knows" how you took them, but the computer that you're viewing it on dosen't.
What you could do to prevent this is to rotate the picture before the upload. This is not a recommended fix but at least people on desktop computers will be able to see it. Though when viewing them on iPhone they'll be rotated - maybe a check for mobile devices wether or not to rotate the image could come in handy - but still again, not recommended.
My embed code to play Youtube video is:
<object height="356" width="425" type="application/x-shockwave-flash" id="myytplayer" data="http://www.youtube.com/v/MTf6qXn5Prw?enablejsapi=1&playerapiid=ytplayer&version=3"><param name="allowScriptAccess" value="always"></object>
I want to track Youtube player's events (play/pause/stop etc)
The following piece of code works independently
window.onYouTubePlayerReady = function(playerId){
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
window.onytplayerStateChange = function (newState) {
alert("Player's new state: " + newState);
}
I am using YUI.
When I put the same in
YUI.add('module-name', function(Y) {
[some other code...]
window.onYouTubePlayerReady = function(playerId){
// console.log(playerId); console.log(ytplayer);
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
window.onytplayerStateChange = function (newState) {
alert("Player's new state: " + newState);
}
},'3.4.0', {requires:'module-a', 'module-b'})
Function onytplayerStateChange works in Firefox and Safari but not in other browsers.
Then I tried YUI functions to make that working in all browsers so I did some changes
window.onYouTubePlayerReady = function(playerId){
var shinyPlayer = Y.one("#myytplayer");
shinyPlayer.on('onStateChange', function (e) {
e.preventDefault();
alert('here');
});
}
but it didn't work for me.
I don't want to place window.onytplayerStateChange outside of YUI.add('module-name', function(Y) {})
Please suggest what should I do to track Youtube player's states in all browsers.
Thanks in advance.
I made a jsFiddle to test this:
http://jsfiddle.net/2Mj6b/4/
For me it feels like addEventListener is a custom implementation of Google.
Normally the second parameter is a callback/function-pointer and no string.
If you attach a variable to the window object it gets global and is from every scope visible. So it's no problem if you define it in the YUI module.
The second problem is that you cant use the player as YUI object you have to stay on dom objects to get this work.
Oh this is a old question. Damn. But i will post this anyway. ;)