yanwsh / videojs-panorama Goto Github PK

Hi,

What audio codec / format is supported for the 360 videos? I don't see it listed in the docs.

The video appears stretched when moving from one orientation to another in fullscreen. Tested on Chrome on Android 5.1

Hello,
I want to change the src of video, but the log shows "VIDEOJS: WARN: Player x is already initialised. Options will not be applied."
How can I remove or dispose the video? I had tried to use .dispose() but not work.

In addition, I'm using angularjs route. If the view is first time entry, then the player will create.
When the view is second time entry, the log will shows the play is already initialised.
Is there any way to check the player is created or not?

Any thoughts on publishing this as a bower package as well as npm since it's front-end functionality?

Of course ""videojs-panorama" : "https://github.com/yanwsh/videojs-panorama.git#<commit_hash>", will work in the bower.json but it would be nice to reference versions and auto update as needed

Hi,

What is the supported 360 video codec and file type? What is being used in the VideoJs 5 demo?

Thanks!

Hi, Amazing and working like a charm !

One question, are we able to launche the video with the Cardboard mode enable by default ?

If yes, how ? And possible to only read the video only this way ?

Thanks a lot !

Is there a way to use this plugin without having to use it with VideoJS? I'm interested on integrating it with a different video player

Hi

This is great but i am struggling to get it to work in safari i know you have listed this as a bug but is there anyway to get the video to play from a cdn in safari?

If i am using Amazon S3 with the link below i cannot get this to work with any setup in safari all other browsers work without issues.
https://acloudfrints.s3.amazonaws.com/shark.mp4

My cors headers are completely open.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
       <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Is it every possible or is this something we cannot get around until Apple apply a fix?

Thanks

Hi!

Issue is pertaining to when using on my laptop. The video player works perfectly fine on Firefox, however, when on Chrome, it only shows a black screen but there's audio. I'm using video.js 5 (latest). I am using the latest Chrome as well. I'm using my own video in my computer, not off any server else well. I got all the codes off from your demo(http://yanwsh.github.io/videojs-panorama/) by viewing the source and implementing them.

Any suggestions what I can do?

Thank you!

Hello,

I'm very interested in this project and the demo works perfectly online.
But when I clone the repo locally, do 'bower install' and fix the assets absolute links, I get the following error: "video.js:19464 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported."
Any idea why this happens?

Thanks for your feedback,
François

Hi yanwsh

First, thanks for your great job to let us enjoy panorama videos via video js.
Here I have a question, does this project have any schedule to support 3D panorama?

I found a m3u8 link as
http://cache.utovr.com/s1h52stns8w2d0trqr/L2_1920_3_25.m3u8
this m3u8 deliver a panorama video with 3D, when i use videojs-panorama to watch, it can not be played correctly.

any idea about this problem?

regards

jack

MobiStor Technology Inc.

Hey there, i'm trying to get this to work inside of a react application. I believe where it's failing is actually with the reference to the three.js library. Any insight would be appreciated!

Hello, I'm trying to make the visual angles change directions automatically when people are watching the video. I hope to take use of the JS arrays to store a sequence of coordinates values of x/y/z axis, and let the visual angles switch by them.
For examples:
var coordinates = {(1,2,3),(2,3,4)}
How can I make it?
I've read your source code and found the snippet code "this.camera.lookat()".
Whether can I use it?

How can I import this plugin to build a player using es6 with webpack?

Three.js has an easy way: import "three"
videojs-panorama??

Thanks

my fault,close

Hi,
I'm testing the 360 videos on android devices and it works well.
The scenario i want to test is opening the page in the background (so all static assets will be preloaded)

When i present the video after all assets where downloaded the video plays normally and not 360.

Did anyone encounter this error before?

Hey Yanwsh, your code rocks! Thank you! I have a question/request I hope you can help me with. I want to use your awesome plug-in, but with an image, not a video. This would be of great help. Thanks.

-Thomas

videojs question reference: http://stackoverflow.com/questions/27890088/video-js-play-a-blob-local-file-the-client-created-with-createobjecturl

When I follow the CONTRIBUTION guide I get this error

$ npm start
npm ERR! Darwin 15.6.0
npm ERR! argv "node" "/usr/local/bin/npm" "start"
npm ERR! node v0.12.0
npm ERR! npm  v3.5.3

npm ERR! missing script: start
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

How do you run the code during development?

With v5, the plugin works fine so far. With v4, we got the following error of running the demo on Chrome:
videojs-panorama.v4.min.js:1 Uncaught TypeError: Cannot read property 'el' of undefined

Most videos seem to be fine but others, such as this one:

http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4

Do not engage in full screen. The fix on the main documentation doesn't work because there isn't a Canvas element underneath the Video, at least.

I've tried both v4 and v5 of the js in case there was something different between the two.

Can I ask what mobile phone does this feature support? I checked your demo page on my Galaxy S7 edge and the video doesn't move when I move my phone around. thanks again.

I am having the same issue as issue #27 except on the desktop(mac or windows) the video will play after letting it play once with only sound. On iOS and Android the video will never play, only sound. On Android the second attempt to play the loading circle will flash looking like a glitch. My video is not local, it is delivered via Wowza streaming engine.

Hey there,

love your plugin.

Can you somehow programmatically control lat / lon settings while the video is playing?

Cheers,
nils

Trying to get this working for a video that is hosted on Azure blob storage.

I can initialize the panorama just fine:

player.panorama({ clickAndDrag: true, callback: function () { } });

But as soon as I attempt to play it

player.play()

I get a ton of errors in the chrome developer's console

three.js:31187 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.(…)

I've tried to set THREE.ImageUtils.crossOrigin = 'anonymous'; as some stackOverflow posts have described, but to no avail.

Sorry to post in this manner, I don't think its necessarily a bug with panorama, but rather with my implementation. In any case any assistance would be greatly appreciated.

Edit:

Here are the CORS permissions from the azure blob storage account:

+ Getting storage CORS rules for service: blob
data:    CORS rule 1:
data:      Allowed Origins: *
data:      Allowed Methods: GET,PUT
data:      Allowed Headers: *
data:      Exposed Headers: x-ms-*
data:      Maximum Age: 5
data:
info:    storage cors show command OK```

How do you disable zoom controls. Right now scrolling vertically on a mouse zooms the video in and out.

Thanks!

Hi, my name is Joogon and I'm reaaaaaaaaaaally appreciate for this plugin.
I use this in my player and all of things are good.
However, it's too hard to get latitude and longitude.
I want to do that give two values simultaneously and real time.
Can you make it in options or etc...?
Thx.

Does VideoJS-Panorama support any version of IE? Currently, IE11 returns the following error: "The media could not be loaded, either because the server or network failed or because the format is not supported." I have confirmed this same video works across other modern browsers.

Thanks

Hi!, I love your 360 Degree panorama view plugin.
is this plugin support:
support mobile devices accelerometer for 360 motion. which i mean is- gyroscope sensor/gyroscope viewing.

I have runing some test regarding this:
Link: http://xaphanentertainment.com/update360/mathew.php
How do i enable that feature for mobile device.

and how do i get work with water mark or logo branded plugin..Tried many time.,not success yet.
Thanks,
Imesh

How to play a playlist continuously?

Good work!

Thanks!

Hi, I am a rookie of videojs and this is my first time to try to use video-panorama.
I followed your steps and download the demo code, but I found the shark.mp4 and fisheye.mp4 cannot play on my local computer and even on server.
I printed the failed message: The media could not be loaded either because the server or network failed or because the format is not supported.
(you can see from here: http://imgur.com/a/dTMy2)
Could you tell me how to solve it?

Hi All,

Amazing player, congrats !

Just one thing, when I'm using the iframe mode, everything is working perfectly, except that it autoplay the video.

I would like to have the poster enable, and on click start the video.

How is that possible ?

Aswelll, when i use a cardboard view, it looks like it's looking down all the time . . . .

Thank you !

Hi
I Use videojs panorama with videojs-contrib-hls. It works fine in chrome, but in firefox, the video is totally black but sound works.
So to put it all together,
Videojs panorama with a mp4 file as source works fine in both chrome and firefox
Our hls streams works fine in videojs with videojs-contrib-hls in both chrome and firefox
But combination of these plugins works fine in chrome but not firefox.

I asked this question in another issue and you said you will test it, but i didn't get an answer.
Our project is under development, but I can provide links to your email if needed.

Does it work with videojs-contrib-hls and another plugins?

Is there any way to use this with a dual-fisheye video as input?
Example from a Ricoh Theta: https://developers.theta360.com/intl/common/img/dualfisheye.jpg

Hey there, I tried to install the plugin using the following command:
npm install --save videojs-panorama
and received a 404 from https://registry.npmjs.org/videojs-panorama and an error that said the plugin hasn't been registered.

May I ask if the plugin support oculus rift and samsung gear? thanks :)

after I initialised panorama for a 360 video I would like to disable it if the next one is not a 360 one, and I am not reloading the page so I'd need to programmaticaly disable it.

thanks
M

I have one video player on the page and I have various links that swap out the video source. How do I accomplish this? I currently have this:

... player.src('url'); player.load();

I know the source is updating but the CANVAS will not update. Unless I click on it again.
Any ideas on how I can have dynamic videos work with this plugin? Thanks!

Is it possible to reduce or eliminate the blur effect around the video?

The center of the video looks clear but it gets blurry towards the edge of the player.

Use case: high res video on desktop and iPad, especially in full screen mode.

Thanks in advance

When on desktop there is no problem at all, when on mobile there is sound but no video in Chrome. Yet in firefox it sort of works but not all the time. Any thoughts?

Grtz

Hey is there a IOS 10 support comming soon.
I tested the video on IOS 10 it works but it runs jagged.
could there be a fix or something to resolve this ?

-Thanks for the work already because it works perfect for the rest of the browsers that i need to use !

Hi Yan,

really great job.
Since videojs-panorama supports 3D now, is there a way to show only one (left or right / upper or lower) part of a 3D video? For those people, who have no 3D devices like VR headsets or 3D-TVs, so they can take part to enjoy 3D SBS or Over/Under videos on e.g. desktop browsers.

Best regards
Pawel

Hello,

Is there any limitation using this plugin with Jquery?

I have the following javascripts:

  <!-- VIDEO JS -->
  <script src="http://vjs.zencdn.net/5.11.0/video.js" type="text/javascript"></script>

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js" type="text/javascript"></script>

  <!-- JQUERY -->
  <script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js" type="text/javascript"></script>
  <script src="js/videojs-panorama.v5.min.js" type="text/javascript"></script>


  <!-- CSS -->
  <link href="http://vjs.zencdn.net/5.11.0/video-js.css" rel="stylesheet">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <link rel="stylesheet" href="css/videojs-panorama.min.css">

But I am receiving this error:

videojs-panorama.v5.min.js:1 Uncaught TypeError: s.scale is not a function

As long as I remove both Jquery imports the code works fine so I was wondering if I cant use Jquery with this plugin.

Hi,sometimes webgl crash when video start play, the screen show "Your graphics card does not seem to support webgl".Is there good solution to resovle it?

Hello,
I'm using videojs-panorama on Android device.
After video pause and play, buffering image is always blinking.
Sometimes when video only play, buffering image is blinking.

When playing back on a Mac with FireFox, the following error occurs in the console, "Error: WebGL: Disallowing anti-aliased backbuffers due to blacklist."

It seems that Mozilla is blacklisting certain browser/video card/OS combinations when using anti-aliasing. https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers

Is it possible to disable this functionality via JS?

Thanks!

Hi Yanwsh,

Not sure if this is setup to work on Android but it doesnt work for me using your demo it outputs like the screenshots below, any suggestions?

The plugin works well on iOS, however if the viewer clicks on fullscreen button, the 360 feature disappears as it revert back to iOS native player. So, if there are way to override the fullscreen button to use canvas rather than the native player? :)