-
hi,
i’m making a vod platform with videos stored in amazon s3. I’m using mp4 files at 3 rates 500k, 1500k, 2500k. I have 2 issues that are important for the end user. 1. how can i set a buffer time for example of 10 seconds, so the video plays smoothly while it loads instead of stop/play for the big hd file. 2. I cannot seek forward unless the video part is loaded. I saw in other vod sites that flowplayer can do that, what must i do to make it work? I use the video files stored in an amazon s3 bucket and i set your secure timed urls. I want to buy your pro license immediatly as this is for me the best player out there, i just have these 2 little issues and if you could help me fix them, it would be perfect as i have been looking for a long time for the perfect solution for a good vod site and this is my favourite one. Thanks
Miguel
-
-
Hello Miguel,
1) Unfortunately setting buffer size is not part of HTML5 specifications. If the video is hosted on a fast server, this is no longer an issue, as the HTML5 player will automatically pick the right buffer length.
The solution is to add a CloudFront distribution for your video files. Then the videos will be on CDN and you should have nice if not great video load times across the globe.
Our FV Player Pro extension which is available for our licensed users allows you to use CloudFront signed URLs for download protection, see our guide here: https://foliovision.com/player/serving-private-cloudfront
Demo can be seen here: https://foliovision.com/player/demos/cloudfront-download-protection
2) Random seeking is only supported when the browser can play the video in HTML5 or if there is RTMP stream if the browser has Flash installed. Our RTMP guide is posted here: https://foliovision.com/player/serving-private-cloudfront#rtmp
So if you provide your videos in MP4 format, it won’t allow random seeking in browser like Firefox on Mac, Opera and so on. You can add WebM format for these and then random seeking will work, or you can add RTMP streaming for your videos.
Thanks,
Martinhi,
thanks for the reply. Can you send me the invoice so i will make the bank transfer today and send you the receipt so i can get started.
I currently have an amazon s3 account with mp4 videos in 500k, 1500k and 2500k hosted there. I’m using wordpress and your free fv plugin. With this setup on chrome and all browsers, it won’t let me seek the video apart from the bit it has loaded. I don’t know if by switching to a cloud distribution will change that.
Miguel
Hello Miguel,
you can buy our license on our website using PayPal: https://foliovision.com/player/download
I will notify our sales department about your invoice though.
Could you please report the video were you can’t seek into buffered parts using our video checker? Heres’ how: https://foliovision.com/player/faq#properties-built-checker-report-playing
That will show us video encoding details and what browser + OS you are using and we should be able to help.
Thanks,
Martinhi,
ok i will buy it online. I’m using Amazon S3 for storage. I setup a cloudfront and rmtp distribution as well. The files i have are all mp4 in 3 rates 500, 1500, 2500k. I did also change the mime to video/mp4. I will now proceed to buy your full license so i can test everything, multi-bitrate etc and see the results. I thinks this should solve all my issues. Thanks, Miguel
Hello Miguel,
just make sure you use our guide for the quality switching here: https://foliovision.com/player/switch-video-quality
Improving the user interface of this feature is on our list.
We also need to add a checkbox to allow our users to mark which one of the qualities is suited for mobile, so that mobile browser get the lowest quality right away. Currently you might need to post the mobile quality video as the first one, so that users (including mobile) get it right away.
Thanks,
Martinhi,
i bought your licenced player and i have a few issues in setting up cloudfront.
I have the cloudfront, entered it in the global configurations, the secret key i can find where that is. I got a key pair when i set it up but they are .pem files i can’t open.
Then for video quality switching, i have my files uploaded like this: filename_500k.mp4, filename_1500K.mp4, filename_2500K.mp4. I’m not sure how to set it up mobile, sd, hd using those labels?
For the rmtp path i just entered the file name in the bucket?
I’m trying to get cloudfront to work, i created a web and rmtp distributions following your guides. Obviously i’m missing the above details in order to make it work. Thanks. Miguel
Hello Miguel,
you need to open the PEM file in any text editor (preferably Notepad on Windows or TextEdit on Mac).
Regarding the “Mobile”, “SD”, “HD” labels – please check step 3. of our quality switching guide: https://foliovision.com/player/switch-video-quality
For your site it should be:
_500k,Mobile
_1500K,SD
_2500K,HDAre you sure the 500k has “k” in lower case and the rest in upper case?
Regarding RTMP – unfortunately this one doesn’t work with the private keys, we are working on fixing the bug.
Thanks,
Martinhi,
the K’s are all caps. I put those settings, in the shortcode how should name the video? I tried for example: video_HD.mp4, video-HD.mp4, video-HD but none worked. I put all the cloudfront details but if i enter a cloudfront link ex: 16166561.cloudfront.net/video.mp4, it doesn’t work, if i use the s3 link, then it works, now the fast forward works too, the only things i’m missing are the cloud, because i still have the problem with playback not smooth, start/stop and the quality switching. These 2 issues i don’t know how to sort them out, i did all the cloud config using your guide.
i forgot to mention, i managed to open the rsa key, it’s a long one and pasted it in the flow player cloud field for that.
another update. I got quality switching working fine. The mobile word goes out of the box, could i rename it? Now i’m just missing the cloud part as right now it only works if i use the s3 link and not the cloudfront one.
Hi,
for the cloudfront, i put restrict bucket access in the settings to avoid people downloading, the link i use is like this: https://d2a0xxxxxxxxxxx.cloudfront.net/xxxxx_2500K.mp4
It won’t work. If i copy and paste the link in the browser, it shows me this: <Error>
MissingKey
<Message>Missing Key-Pair-Id query parameter</Message>
</Error>hi,
i give you the latest update.
I managed to get cloudfront working by using the cname in the url, instead of the classic cloudfront on.
This way it works on chrome, firefox but not in safari, it says video not found there. Another issue is the quality switching, if i put hd it’s ok, mobile seems ok (sometimes it pixelises in chrome unlike in firefox), but the sd one, if i click it, it puts the video over the other video which is strange. And the mobile word label, i would need to rename it so it doesn’t come out of the box.
Hello Miguel,
step 6. of our guide shows you that when you enable the Quality Selection in the “Add FV WP Flowplayer” dialog, it allows you to “Show hint” which shows you what URLs will be required: https://foliovision.com/player/switch-video-quality
If the “Mobile” is too long, you can adjust the quality selection button size using CSS like:
.flowplayer ul.fv-player-quality li a { width: 80px }I’m checking the quality switching together with CloudFront signed URLs right now to find any bugs in our code.
Thanks,
MartinHello Miguel,
here’s my test of quality switching with CloudFront signed URLs (see the second video on the page): https://foliovision.com/player/demos/flowplayer-quality-switching
There was a bug which prevented this from working when there were + symbols in the file name (Amazon S3 and CloudFront uses that instead of empty spaces) in Flash engine (required by Firefox on Mac, as it won’t play MP4 natively).
We fixed this bug and released FV Player Pro 0.1.10, you should upgrade to it.
If you could post your file URL here (just the URL, no need for any keys, we also won’t publish it), we can check if there are any issues with that. But I’m surprised that it doesn’t work for your in Safari, as that one plays MP4 natively.
Thanks,
Martinhi,
i upgraded but it didn’t make a difference. The problem is strange, mobile and hd video play normal full screen, but the sd one is cut around the edges and you can see the splash image behind it. In safari, the video seems to start, the progressing bar but the screen stays on the splash image, it doesn’t show the video even though the progress bar is progressing.
Hello Miguel,
it sounds like a video encoding issue. Please use the video checker on the video: foliovision.com/player/faq#properties-built-checker-report-playing
Can you play any of the mobile, sd or hd videos in Safari? Or do all of them fail?
Thanks,
Martinhi,
encoding problem, it’s not possible, those clips were tested before with the classic flow player and they worked perfect accross all platforms including IOS. They were also tested with JW and octoshape players and always worked fine.
In safari if i remove the quality switching option and set the flash player by default, the clip plays, but then it doesn’t play in firefox anymore.
basically quality switching works in chrome, except the 1500k clip gets cut around the edges. The playback performance is still not so great even though it’s in cloudfront. If i remove ‘flash player by default’ it won’t work in safari, and if i tick it, it won’t work in firefox and chrome. I’m using the Cname url in the video, i tried to use the cloudfront one but it doesn’t work for some reason.
Hello Miguel,
if you could use our Video checker from within your Safari, that would be great as we would see your video encoding as well as your Safari version and OS. Here’s how to use it: http://foliovision.com/player/faq#properties-built-checker-report-playing
Please note that this information is kept private.
A test URL where we can see the video would be even more helpful.
Otherwise I’m not sure what could be the problem – Safari should play your MP4 using HTML5 engine perfectly fine, just like Chrome. If it plays for you when you force Flash mode in Safari, that suggests that there is indeed an encoding issue. If it doesn’t play for you in Chrome and Firefox in Flash mode, are you sure you have Flash enabled?
If it played in classic Flowplayer, that one uses Flash, so there still might be some HTML5 incompatibility with your video. I’m not sure about jwPlayer though, we use the same HTML5 engine as that one (it relies on browser), although it could be using Flash without you knowing it.
The clip around the edges of your 1500k clip suggest that your video aspect ration might be different on that one.
Thanks,
Martinhi,
for the multi bitrate support, does it have to have 3 profiles or can it have just 2? For example mobile and HD and remove the middle one.
Hello Miguel,
sure, you can just use two. But make sure you update the global configuration (where you set the quality prefixes and labels). Currently we only support one configuration per site, so all the videos will use this.
Thanks,
Martini kept only 2 profiles. it works in chrome and firefox. In Android the loading dots stay always on, in safari, it doesn’t work, it stays on the splash image.
i kept only 2 profiles. it works in chrome and firefox. In Android the loading dots stay always on, in safari, it doesn’t work, it stays on the splash image.
Hello Miguel,
we will have to improve this to automatically select he lowest quality for mobile devices – your Android phone is probably trying to play the HD video.
You can try posting your mobile quality video into a standalone player and see if that one works. It would be also good to know if that one will play in Safari. That would answer the question if this is related to the quality switching or the video encoding.
Thanks,
Martinhi,
i tried those clips with the basic jw player for wordpress as well as media element and both worked fine accross all browsers, android and ios. That was using standard unprotected S3 storage and a single clip.
For android, i’m testing on a Samsung galaxy tab 4 tablet.
Hello Miguel,
that’s a good test, have you tried our own video? See the second video on the page here: https://foliovision.com/player/demos/flowplayer-quality-switching
It’s in MP4 format, to it should play in your Safari, unless there is some bug which doesn’t occur on our version (Safari 7.0.1 (9537.73.11) on OS X 10.9.1).
Thanks,
Martinhi,
i tested the clips, they work on safari, except it’s not possible to seek through the video unless in the loaded bits. In android, your videos have the sam problem with the 3 dots constantly on the screen even though the video is playing.
Hi Miguel,
We’ll work with you and get this right.
Thanks for your help with the mobile testing!
hi,
thanks.
There’s another little issue, also happens on your video samples, there are some kind of artifacts that appear in the middle of the video, kind of like broken picture. I took a screenshot to show you: absoluteps4.com/picture_artifact.jpg
This happens on all videos mine and yours too and is very noticeable mainly if you go full screen.
just an update, those artifacts show a lot on chrome, but in safari and firefox that doesn’t happen.
hi,
to change the text size inside the quality buttons, or the buttons themselves, this code you gave me: .flowplayer ul.fv-player-quality li a { width: 80px }
do i use it here: fv-player-pro/css/style.css
or is it elsewhere?
thanks
here’s a round up list of all issues i have:
Chrome issues: https://foliovision.com/support/fv-wordpress-flowplayer/troubleshooting/google-chrome-video-artifacts
Safari: no video works, it stays in the splash image, the video plays, you can hear the sound right and the progress bar works but the video stays on the splash image and if i remove the splash, it stays on a black screen. If i click the quality switch, i can see for a second the image of the actual video before it goes back to the splash again. Note that before i got the pro version of your plugin, safari was working.
I tested with Jw player as well as the old flowplayer and media element, and those issues didn’t happen.
The reason none of those players were ok for me was the file protection, cdn, fast forwarding and other features that were not there in the wordpress plugins.I cannot re-encode the files as there are 1500 of them. Besides they were encoded specifically for the web using CARBON CODER, a professional encoder.
Just for info, I tested on internet explorer now, no issues, all fine, sound, controls, quality. Only thing is it sets low quality as default but that’s not a big deal.
Hello Miquel,
I’m leaving for a week of vacation, so I’ll be able to fix any bugs and help you troubleshoot the issues at start of September.
Thank you for summing up the issues, I’ll make sure we address each in a separate thread and provide some quick troubleshooting steps now.
Thanks,
Martinhi,
could you tell me where do i use this: .flowplayer ul.fv-player-quality li a { width: 80px }
to change the size of the quality buttons so the text inside them doesn’t come out. Thanks
Hello Miguel,
sorry about missing that question, I though I answered it. You should add the rule in your theme stylesheet. You should avoid doing this in plugin files, as a plugin update will then revert your changes.
Thanks,
Martinhi, thanks, it’s fixed now. I’m working on an private site, i don’t know if it’s ok to give you the link so you can test a video a see if you encounter the problems i do.
Hello Miguel,
we will keep the video private as well, we won’t publish your URLs, so no worries, you can send it to us.
Thanks,
Martinok,
this is the url: ‘www.r….tv/ondemand’
You can login with this account so you can see the videos:user: demo, password: r….4
thanks
Hello Miguel,
thank you for posting URL for your videos. I had a look and it plays fine in my Safari (version 7.0.1 (9537.73.11) on OS X 10.9.1)).
I can seek to any part and I can see the picture. We really need to know your Safari version to effectively troubleshoot this.
Thanks,
Martinhi,
i use safari on windows 7. it’s version 5.1.7. Version 7 for windows is not available as far as i’ve searched.
Can you also test firefox to see if the audio is fine, on my pc it plays in slow motion but it could be my machine.
Thanks a lot for your support.
Hello Miguel,
Safari for Windows is discontinued, not much users should be using that anymore. But we can test on that as well.
We will also test Safari 5.x on Mac, that one has a lot more users.
I answered the Firefox issues in the other thread.
Thanks,
Martinhi,
i have a little issue in playback, when playing the hd video, the playback is not continuous, it sometimes stops then plays again as it buffers. What can i do to improve this and make it smooth at all times?
I saw some sites using the flowplayer flash version and their playback is always smooth even though it’s streaming a 1080p video which has 1.3gb in size. I stream 720p files which have 200 – 600mb in size and the playback is not so smooth even though i’m using cloudfront. I put download protection on the files and used the cloudfront domain as rtmp address. In mobile version, the files play good but when i switch to hd, the playback is slow and constantly stops/plays.
Hello Miguel,
what matters the most here is the video duration in relation to the video size – the bitrate. We recommend using around 700 kbps for 360p video and 2500 – 5000 kbps for 720p and 1080p videos. You use 500, 1500 and 2500 kbps, so that should be fine.
Next, can you check the download speed of your MP4 files directly?
We will look for any speed-up recommendations for Amazon CloudFront. In our test we were getting as good speeds as any large CDN used by big news companies, see the “We also tested Amazon S3 and Amazon CloudFront” slide here: https://foliovision.com/2014/05/video-wordcamp-presentation
Thanks,
MartinHello Miguel,
I tested our CloudFront distribution download speed and I was getting 914kB/s: https://foliovision.com/player/demos/cloudfront-download-protection
That’s enough for 7000kbps video bitrate. So you should not be having any issues with your 2500kbps videos.
Thanks,
Martinhi
now the only 2 problems i have are:
In firefox the audio is in slow motion. If i select force flash by default, then in firefox everything works fine but by doing that, the videos don’t work anymore in internet explorer and i can no longer seek the video in any browser, so it must be something to do with the player in order to have it work fine in firefox. In all other browsers it works fine.
You had mentioned that there was an issue due to the file protection in cloudfront.
The last issue is with android controls, if i seek the video, the 3 dots appear and remain over the video all the time. If i go full screen, no controls work at all.
I only have those 2 issues.
thanks
Miguel
