Open andresilva-cc opened 6 years ago
Yep, i think this is a great idea.
Hi all,
Thanks for raising this feature request. While we discuss this, if you want to attach a custom video, you can do the following,
Thanks, for myself this is the solution i needed, but not for my users. But for now it is all i need. Thank you
If I do this on my project, just like you did in the video, the video is not loading... only difference between our videos are, that mine is in .webm format...
Can a file be uploaded without it being shown on the sidebar? I would like to upload some PDFs and just have links to them throughout the pages.
Thanks.
@Abijeet I am unable to replicate your demo
BookStack v0.28.2
Apologies for the language, can re-upload with out the swear word if you'd prefer :)
question is what acutally is playing the video, and hence what formats are possible? is it some integrated js-player, or is the browser actually nativly playing the file?
i've also uploaded an mp4 file, but those are just containers certainly.
The two files I tried:
General
Complete name : HP80My1VMluY55lT.mp4
Format : MPEG-4
Format profile : Base Media
Codec ID : isom (isom/iso2/avc1/mp41)
File size : 51.6 MiB
Duration : 3 min 47 s
Overall bit rate : 1 904 kb/s
Writing application : Lavf57.83.100
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : High@L4
Format settings : CABAC / 3 Ref Frames
Format settings, CABAC : Yes
Format settings, ReFrames : 3 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 3 min 47 s
Bit rate : 1 772 kb/s
Width : 1 920 pixels
Height : 1 080 pixels
Display aspect ratio : 16:9
Frame rate mode : Variable
Frame rate : 23.976 (24000/1001) FPS
Minimum frame rate : 23.974 FPS
Maximum frame rate : 23.981 FPS
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.036
Stream size : 48.0 MiB (93%)
Color range : Limited
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709
Audio
ID : 2
Format : AAC
Format/Info : Advanced Audio Codec
Format profile : LC
Codec ID : mp4a-40-2
Duration : 3 min 47 s
Bit rate mode : Constant
Bit rate : 126 kb/s
Channel(s) : 2 channels
Channel positions : Front: L R
Sampling rate : 44.1 kHz
Frame rate : 43.066 FPS (1024 SPF)
Compression mode : Lossy
Stream size : 3.41 MiB (7%)
Language : English
Default : Yes
Alternate group : 1
and
General
Unique ID : 246705257846812138323519864319541940752 (0xB999B45071F2B3B331F85243F31E9210)
Complete name : QBmbGIqnz1950HAC.mkv
Format : Matroska
Format version : Version 4 / Version 2
File size : 51.5 MiB
Duration : 3 min 47 s
Overall bit rate : 1 901 kb/s
Writing application : Lavf57.83.100
Writing library : Lavf57.83.100
ErrorDetectionType : Per level 1
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : High@L4
Format settings : CABAC / 3 Ref Frames
Format settings, CABAC : Yes
Format settings, ReFrames : 3 frames
Codec ID : V_MPEG4/ISO/AVC
Duration : 3 min 47 s
Width : 1 920 pixels
Height : 1 080 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 23.976 (24000/1001) FPS
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Default : Yes
Forced : No
Color range : Limited
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709
Audio
ID : 2
Format : Opus
Codec ID : A_OPUS
Duration : 3 min 47 s
Channel(s) : 2 channels
Channel positions : Front: L R
Sampling rate : 48.0 kHz
Bit depth : 32 bits
Compression mode : Lossy
Language : English
Default : Yes
Forced : No
The two files I tried:
can you add what tool you used to generate this info? i'd like to generate comparable output for my testfiles.
@whysthatso I used mediainfo (https://mediaarea.net/en/MediaInfo)
Hi, I have the same issue, I want to upload video in a page but it not possible :(
There are my file infos :
General
Complete name : video.mp4
Format : MPEG-4
Format profile : Base Media
Codec ID : isom (isom/iso2/avc1/mp41)
File size : 290 KiB
Duration : 58 s 560 ms
Overall bit rate : 40.5 kb/s
Writing application : Lavf58.31.104
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : High@L4
Format settings : CABAC / 4 Ref Frames
Format settings, CABAC : Yes
Format settings, Reference frames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 58 s 560 ms
Bit rate : 38.9 kb/s
Width : 1 592 pixels
Height : 894 pixels
Display aspect ratio : 16:9
Frame rate mode : Variable
Frame rate : 12.893 FPS
Minimum frame rate : 8.333 FPS
Maximum frame rate : 25.000 FPS
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.002
Stream size : 278 KiB (96%)
Writing library : x264 core 158 r2984 3759fcb
Encoding settings : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Codec configuration box : avcC
I done an other test with an other video and it worked
file info :
General
Complete name : video2.mp4
Format : MPEG-4
Format profile : Base Media
Codec ID : isom (isom/iso2/avc1/mp41)
File size : 874 KiB
Duration : 1 min 15 s
Overall bit rate : 94.8 kb/s
Writing application : Lavf58.31.104
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : High@L4
Format settings : CABAC / 4 Ref Frames
Format settings, CABAC : Yes
Format settings, Reference frames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 1 min 15 s
Bit rate : 92.4 kb/s
Width : 1 578 pixels
Height : 1 086 pixels
Display aspect ratio : 3:2
Frame rate mode : Variable
Frame rate : 16.080 FPS
Minimum frame rate : 8.333 FPS
Maximum frame rate : 25.000 FPS
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.003
Stream size : 852 KiB (97%)
Writing library : x264 core 158 r2984 3759fcb
Encoding settings : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Codec configuration box : avcC
I don't understand why this one worked and not the other :/
Hi there,
We're pretty much decided on using Bookstack, but attaching custom videos will be important for us. Just a bit concerned about hitting a situation where some videos mysteriously fail to play. Anyone know what the state of play is with this issue?
@SimonMGS and @andresilva-cc, have you tried this in different browsers? Is it only a Safari issue or an issue on all browsers?
I suspect this may be related to BookStack not handling the headers correctly?
Here are the web server logs from a request through the BookStack URL using Firefox:
196.247.57.252 - - [31/Jan/2021:01:50:40 +0000] "GET /bookstack/attachments/1 HTTP/2.0" **200** 10546620 "https://website.com/bookstack/books/testwr42/page/werf23" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0"
and with Safari:
196.247.57.252 - - [31/Jan/2021:01:49:47 +0000] "GET /bookstack/attachments/1 HTTP/2.0" **200** 3846480 "https://website.com/bookstack/books/testwr42/page/werf23" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
In both instances, it returns the response '200'.
When doing the same request to the same video file but not through BookStack, but directly to the file via the same web server, with Firefox:
196.247.57.252 - - [31/Jan/2021:01:53:26 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **200** 3260170 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0"
196.247.57.252 - - [31/Jan/2021:01:53:27 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 60860 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0"
and Safari:
196.247.57.252 - - [31/Jan/2021:02:10:08 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **200** 3718922 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:08 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 2 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:09 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 4710121 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:09 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 60860 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
196.247.57.252 - - [31/Jan/2021:02:10:10 +0000] "GET /bookstack/sample-mp4-file.mp4 HTTP/2.0" **206** 9953559 "https://website.com/bookstack/sample-mp4-file.mp4" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15"
In this instance, the web server returns a 206 immediately after the 200. The 206 is a partial response, and is to do with video streaming, it sends the first part of the file for processing. Firefox will handle video with 200 responses, but Safari depends on a 206 response (see Apple literature here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6).
There is a test outlined on the Apple page noted above to see if the server is correctly supporting partial requests. If it is, it should return 100 bytes with the following curl command:
curl --range 0-99 http://example.com/test.mov -o /dev/null
Here are the results, suggesting that the bookstack passing isn't supporting partial requests:
curl --range 0-99 https://website.com/bookstack/sample-mp4-file.mp4 -o /dev/null
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 100 100 100 0 0 209 0 --:--:-- --:--:-- --:--:-- 209
curl --range 0-99 https://website.com/bookstack/attachments/1 -o /dev/null
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 10.0M 0 10.0M 0 0 5228k 0 --:--:-- 0:00:01 --:--:-- 5225k
Looks like BookStack may need to ensure it is passing the correct headers when it acts as the middleman using the /bookstack/attachments/1
to parse the MP4 file.
If testing with large files using Firefox through the BookStack URL (which will return 200) it may be trying to download the whole file before play starts, so be patient when testing on large files.
Also note the related error in the Safari console when loading https://website.com/bookstack/attachments/1
directly:
Failed to load resource: Frame load interrupted
(https://stackoverflow.com/questions/12359600/failed-to-load-resource-frame-load-interrupted-agian)
I think we may want to ask whether this workaround is best for videos though. A separate feature to insert videos that used the same mechanism as for images would provide a direct url that would likely overcome this issue. And for standard non-embedded video attachments the headers issue shouldn’t be a problem.
This is proving trickier that I had hoped. Attachments are stored outside of the public/ directory, and therefore aren't accessible directly with a url, with no built in option to allow them to be.
I had looked at whether allowing more file types into to the image uploader (such as .mp4 etc) to reuse the image upload mechanisms would be better, and then just add in a custom video upload button. But there is a lot more going not there than I thought, such as image compression which wouldn't be applicable to videos, and wouldn't be a simple change in the code. Moreover, it has a 'secure' option which when enabled would put the videos outside of public/ and then would stop the video embedding working again.
Any ideas from anyone welcome at this stage. I'm also curious how this works on s3 storage. Does it still useattachments/1
as a URL or does it use the direct URL to the storage?
This one is beyond me unfortunately, have reached the limits of my PHP abilities. I changed some things around to allow videos to be uploaded through the image gallery, and then when embedding them they work fine so would resolve the issues above. Due to the secure option available on the image gallery though, this wouldn't be a long-term solution as would run into the same issues as before with attachments.
Instead, after working through a whole bunch of options, I'm thinking the best way to do this now will be:
@maggie0002
Any ideas from anyone welcome at this stage. I'm also curious how this works on s3 storage. Does it still use attachments/1 as a URL or does it use the direct URL to the storage?
S3-based storage attachments are still served over the same mechanism, but fetched from storage to BookStack on request.
The upload and display side of things for video will be the relatively easy part in my view. The thing I've never liked about video is that it's complex to support on the web. As you've found, the hosting side needs to serve video properly, which webservers will support but it does complicate if we need to do anything more that public serving as you've mentioned.
My main issue is format support. Video is tricky, especially if wanting to use newer and more efficient formats, as it can largely rely on operating system, system added codecs & web browser. Often you'd want to supply multiple options for best support when it comes to video, but I really don't want to get into video processing within BookStack. We just couldn't provide a nice reliable process for non-technical people. This is the main hurdle in my opinion, and why I've not been eager to move this forward.
@ssddanbrown thanks for dropping a line on this to give an update.
I see where you are coming from, there can be a lot of complexity to video streaming, although as you note mostly from the web host side rather than the BookStack side; not that it would necessarily prevent the support requests coming back here.
I had pictured this to be mp4 support rather than branching out into more complex formats. Complications as you mention: there would be requests for more formats (would have to refer people to convert their videos before uploading or to host on other services such as Google); and offering secure storage in the future.
Personally I feel these challenges are trumped by the growing demand these days for video, even if it means it would have to be without secure storage/more complex formats. Whether it be video documentation, education, hobbies, music, news and everything in between, video is increasingly dominating and I imagine demand is only going to keep growing.
+1 still from me on future support. Thanks for taking the time to take a look through this ticket.
I'm trying to upload two videos, one over 100mb and the other over 200mb. It appears they can upload, but there is no 'finalizing' the upload and I don't see them 'attached'. They are mp4 format. Are these files just to big?
Uploading and playing videos using the secure option /attachments/1 results in very slow playing experience/cutting off to the point of the video being not usable.
@cb3inco do the files actually get uploaded or you are getting an error? You followed the instructions here to increase the limits? See https://www.bookstackapp.com/docs/admin/upload-config/#changing-upload-limits
@kassemz I ended up going a different route in providing those videos to our users. 'routing' the video through Bookstack doesn't really help when using a distributed file system for large files when it's not providing a direct link to those files. I ended up using Cloudflare stream for video playback and created a separate bucket with a specific policy that allows me to link directly to the video for the user to download.
Hi @Abijeet
I love Bookstack and am trying to leverage it to also provide video instructions for some tasks on a synology system. The video files are going to be stored on the synology system locally.
I wonder if this was solved. I have the same issue described above "TheFiZi". I am able to upload the mp4 but it doesn't play the mp4. (FYI, I had also changed the upload limits etc at the link that @kassemz posted )
Alternatively, if it hasn't been solved, has anyone found a workaround ?
My concern is more on ensuring I can play the videos. The videos are in mp4 format. If the specifics of mp4 have to be changed, I am sure I can use handbreak to change them.
FYI, I installed Bookstack using Portainer ( https://www.youtube.com/watch?v=_13K1DeZwhk ).
thanks
NB
Hi Guys,
I found a work around, It seems to work on safari & chrome on macs so far.
As mentioned above my system is a synology and I have installed bookstack using Portainer link above.
The image files when uploaded to the bookstack website are being accessed through the following URL http://www.myhomenetwork/uploads/images/gallery/2021-06/sample.jpg. The file is being uploaded to the docker folder /docker/bookstack/www/uploads/images/gallery/2021-06/.
So I created another folder (videos) under uploads which was at /docker/bookstack/www/uploads/, once I uploaded the mp4 or m4v files there, they played fine without any challenges (if I accessed them directly.
Now when I needed to inserted a video (insert/edit media) on a editable page, I inserted the full URL http://www.myhomenetwork/uploads/videos/sample.mp4. It worked perfectly.
Hope this helps those of you who are having challenges.
NB
Was wondering if there is any update on native video upload and player support. Most of our wikis are becoming video explainers and would love if the app supports it. We're currently using a workaround with video.js and editing page's html, but its not sustainable.
So I created another folder (videos) under uploads which was at /docker/bookstack/www/uploads/, once I uploaded the mp4 or m4v files there, they played fine without any challenges (if I accessed them directly.
Now when I needed to inserted a video (insert/edit media) on a editable page, I inserted the full URL http://www.myhomenetwork/uploads/videos/sample.mp4. It worked perfectly.
Thanks! Works for me.
@ssddanbrown - Having the ability to set a default location/URL for uploading local video files and then having the ability to select that location (maybe an UPLOAD VIDEO button next to the UPLOAD FILE button) in the Attachments uploader and finally having the option/ability to list the videos in a drop-down list in the Insert/Edit Media popup may be a nice workaround for native browser playback.
So I created another folder (videos) under uploads which was at /docker/bookstack/www/uploads/, once I uploaded the mp4 or m4v files there, they played fine without any challenges (if I accessed them directly.
Now when I needed to inserted a video (insert/edit media) on a editable page, I inserted the full URL http://www.myhomenetwork/uploads/videos/sample.mp4. It worked perfectly.
This works for me too! Notably it solved an issue where scrubbing through the video was broken in Chrome, playback was completely broken in Safari, but everything worked normally in Firefox.
I agree with a lot of the sentiments in this thread though--proper video support in Bookstack is definitely needed! So much documentation is done through short video clips nowadays, so I think even basic and limited support is much better than nothing. Right now, many video uploads at my company will likely have to be done by me personally since getting everyone on my team to learn how to upload the file into the correct folder, etc., will be nigh impossible.
It would be nice to have the ability to upload videos and files. You could use the same file manager and just allow those type of files too. For files, maybe we could use the file manager to upload, and then use the link option to insert it as a download option.