I was trying 180 degree video player provided by videojs-panorama.
I referred the following code snipet.
var player = window.player = videojs('videojs-panorama-player', {
autoplay: true
});
player.panorama({
videoType: "VR1803D",
clickToToggle: true,
autoMobileOrientation: true,
VREnable: true,
Notice: {
Enable: true,
Message: (isMobile())? "please drag and drop the video" : "please use your mouse drag and drop the video"
}
});
window.player = player;
Used this version of videojs-panorama.
https://github.com/yanwsh/videojs-panorama/releases/tag/v1.0.0-beta
But the video appears to be cut from left-right/top-bottom.
Here is the screenshot.
https://imgur.com/a/AAKrWwt "180 degree player"
The same video when checked on youtube, plays properly.
https://www.youtube.com/watch?v=oeln0dsNzsY
Let me know, what am I missing here?
Related
I have a videojs player. I want to chage play icon in controlbar with replay icon when the video has end.
You can see like youtube player :
This is my code :
<script>
videojs("my_video_1").ready(function(){
var vid = this;
vid.on("ended", function(){
alert ("I want to change play icon in cotrolbar with replay icon");
// i dont know to chage play icon when the video is finish
});
});
This is my full code. You can run it via jsbin: http://jsbin.com/fijefi/2/
thank you
You don't even need javascript to do this. You can change the play icon via CSS.
In the default LESS file there are two states for the play button:
.vjs-default-skin .vjs-play-control:before {
content: #play-icon;
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
content: #pause-icon;
}
You just need to add a third state when the video has ended. There is already a CSS class for that. You'll end up with something that looks like:
.vjs-default-skin.vjs-ended .vjs-play-control:before {
content: "YOUR REPLY ICON";
}
I have initialized video js player on my webpage
and i have a function that is triggered on a button click to load source to the video . and show the player and start playing it (auto start is set to true)
function playVid(x) {
videojs("vidPlay").src({type: "video/mp4", src: "http://www.domain.com/getVid?id=" + x});
showPlayer();
}
this works very well in firefox but in other browsers it only plays the audio with black video...
what is wrong here ?
how can i fix this ?
I have an image which I am displaying with the help of image view using Sencha Architect 2. I am able to get a tap event on the image. But I don't know how to save the image to phone when the image is tapped.
I did a Google search for this but could not find the proper documentation or example.
Can anyone help me please.
Here is the code I am trying
tap: function(img, e, options) {
var overlay = Ext.Viewport.add({
xtype: 'panel',
modal : true,
hideOnMaskTap : true,
hidden : true,
width : 100,
height: 40,
items :
[
{
xtype:'button',
text:'Download'
}
],
});
overlay.showBy(img);
}
When I click on Download button the image should get saved to SD card (phone memory) or local hard drive.
can some one help me ?
Thanks.
To get the image name:
I am guessing that you are adding the image with the xtype img?
If so image src is img.src
Otherwise you will need to add the following command to see what the object contains.
console.dir(img);
Save the image:
You will be able to save the image to localstorage if the source is base64.
JavaScript will not write to SD Card or alike.
Other than that you can cache the image.
If you are using PhoneGap this will be possible.
please i need your help folks!
I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.
Are you sure the video is not hidden behind another element? Play with the z-index as the video should be visible. I've had a few issues with this in the past, such as the video flickering in and out of visibility on scroll.
I ended up playing the videos in a light box since anything slider would leave the video playing as the carousel continued to scroll. Also, if you use an infinite scroller there were also issues with it playing the video in two places.
Providing you are using something like JW Player you will be able to set up some actions to pause the video on slide or similar but basic youtube embeds will be an issue.
Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.
If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
$('#slider').anythingSlider({
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});
Would like to know if it's possible (and how) using the YouTube iframe API to have an html button or link, external to the player, to toggle the sound on and off.
Thanks,
Mauro
see jQuery Youtube Plugin for complete specs and download.
It will be possible to declare a player like this:
jQuery("#youtube-player-container").tubeplayer({
width: 600, // the width of the player
height: 450, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: "DkoeNLuMbcI", // the video that is loaded into the player
preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
onPlay: function(id){}, // after the play method is called
onPause: function(){}, // after the pause method is called
onStop: function(){}, // after the player is stopped
onSeek: function(time){}, // after the video has been seeked to a defined point
onMute: function(){}, // after the player is muted
onUnMute: function(){} // after the player is unmuted
});
Then just add a link with the desired function:
<a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'>
Mute player