Foliovision › Forums › FV Player › How to … › Using AWS MediaConvert with FolioVision
-
Hello,
i am trying to use AWS MediaConvert Service with FolioVision and went throw the Guide: https://foliovision.com/player/securing-your-video/mediaconvert-encrypted-hls-guide.
Unfortunately it doesnt work. Do I realy just need to go throw the mentioned steps? Or do I also need to create a User as explained in “Serving Private Videos with Amazon S3” Guide – and use the key for the settings in “Amazon s3 Protected Content” part in wordpress? The next Point is, if i also need to fill the setting section “Amazon AWS Decoder (Pro)” Part in wordpress? But where do i get the data for this? I recognized that without this i even dont get the oportunity to add the Encryption HLS by adding a new video via FV Player?Can you please help me according this, respectively telling me which steps are additionally necessary for using AWS MediaConvert.
Regards,
hoshang
-
-
Hi Hoshang,
To use AWS MediaConvert you need to set-up S3 and Cloudfront first. MediaConvert only converts your videos to encrypted HLS, but you still need S3 to store those files and CloudFront to distribute those files.
Here are links for S3 Guide and here for Cloudfront Guide.
Those are really helpful in-depth step-by-step guides but since the whole AWS set-up is really time consuming process with a lot of small things that people can possibly miss we offer our clients the AWS Expert-set up service. We’re able to configure the services exactly for your needs. Live, within few hours with detailed end-user manual on how to use them.
Thanks,
Juraj- This reply was modified 5 years, 7 months ago by Juraj Kacaba.
Hi Hoshang,
AWS setup is difficult. We offer very detailed documentation to help you with DIY. We are unable to troubleshoot AWS setup hands off though or we’d have to stop developing FV Player completely just to offer free support to Amazon.
We do have several services to help you with AWS setup. Feel free to book the one which suits your needs best. For Elastic Transcoder, it’s necessary to have working Cloudfront first.
Let us know if we can be of assistance.
Hi Hoshang,
Actually, you need to use CloudFront.
As the guide says in step 21. “Make sure you are using a CloudFront distribution with your S3 bucket”.
The guide is long and it’s easy to overlook this, so we might tweak the guide in the future, thanks for the feedback.For the HLS decryption key:
You can use the generator in our documentation to generate the key(step 16) and then set the key into MediaConvert DRM encryption settings as the guide says.The AWS decoder is not related to MediaConvert, it’s part of the older AWS service called ElasticTranscoder.
Thanks,
JurajHey Juraj,
as i understood, the guide tells: you need “either” cloudfornt or fix the file permission. So that both ways should workt. Also the step 24 of this guide tells that it ist also working wihtout cloudfront – see the image below. Is it wrong in the guide?
Thanks for reply,
HoshangHi Hoshang,
Sorry for the misunderstanding on my side, you are right.
You don’t particularly need CloudFront to use MediaConvert encrypted HLS, but it solves the problem with file permissions you would need to fix in the case you don’t want to use CloudFront.
Although MediaConvert does work without CloudFront. We recommend using them together because as I said earlier, it fixes the problem with permissions and makes stream much faster all around the globe.
Anyway, thanks for the feedback! We’ve decided to make changes in the documentation based on your experience. Also, if you have any other questions feel free to ask.
Thanks,
JurajHello Jurajm
thanks a lot for your answers.
I have still one question, which i also tried to ast with my first comment to this issue. In Step 24 of the Guide (https://foliovision.com/player/securing-your-video/mediaconvert-encrypted-hls-guide) i have to paste in the “Static key value” from Step 16. into the Encryption HLS field. But as you can see in the image 1 below, i dont have the option in the FV player settings to paste in the Static key value.
I recognized getting this option in FV Player by filling the Settings in Amazon AWS Decoder Part (See image 2). Is it because of that or something else why I don’t get an input option for the static key in fv player. If I have to fill the part in Amazon AWS Decoder, how and where do I get the corresponding data?Thanks,
HoshangHi Hoshang,
No, you don’t need to fill any of the AWS Decoder settings. Our shortcode editor is responsive, so you need to fill the “Video” field first with an HLS URL ending with .m3u8 and than the “Encryption key” field appears at the very bottom. There you can insert the encryption key generated with our generator in that documentation page you’ve mentioned.
It’s basically the same as with the documentation I mentioned in my previous response. Based on your experience, we’ve decided to make significant changes in the way our shortcode editor works in the case users are trying to embed HLS stream. We are also preparing an announcement for those changes on our Weblog, it should be released next week. So you can check it regularly if you want to be in touch with all of our new improvements.
Thanks,
JurajHey Juraj,
i filled already the field with an .m3u8 ending Url, but still it doesnt show off a field for the encryption key. See the image below. What du you mean with : “It’s basically the same as with the documentation I mentioned in my previous response.”?
Thanks,
HoshangHi Hoshang,
In that case, could you please open your browser JavaScript console (here’s how: link ) and then insert the HLS URL into the “Video” field and see if you get some error?
By that, I’ve meant that we’ve done changes in documentation and in shortcode editor for the next FV Player update.
Thanks,
JurajHey Juraj,
i get this in the console by going on fv-player and adding the url in the field (i tried twice):
fv_wp_flowplayer_field_src has been updated? false https://s3-eu-west-1.amazonaws.com/mediaconverttest2/MediaConvert/index.m3u8
shortcode-editor.js:3203:13JQMIGRATE: Migrate is installed, version 1.4.1 load-scripts.php:8:542
onmozfullscreenchange sollte nicht mehr verwendet werden. fv-flowplayer.min.js:10:7644
onmozfullscreenerror sollte nicht mehr verwendet werden. fv-flowplayer.min.js:10:7644
fv_wp_flowplayer_field_src has been updated? false https://s3-eu-west-1.amazonaws.com/mediaconverttest2/MediaConvert/index.m3u8
shortcode-editor.js:3203:13What does it mean? What i have to change?
Thanks,
HoshangIt didnt put the image inside the reply. Now :)
Hello Hoshang,
here are some extra troubleshooting steps.
1) Please check the HTML source code of the page (Ctrl + U) where you are opening the FV Player Editor (it might be the wp-admin -> FV Player page, or any post editing page). Then check if it contains “fv_wp_flowplayer_hlskey_decoder” – you can use Ctrl + F to bring up the search bar for the page source code viewer.
2) Please reinstall FV Player Pro from a fresh ZIP file from https://foliovision.com/my-licenses (just the FV Player Pro plugin, no need to do it for FV Player), clear your browser cache and try again with the console enabled. You should see:
shortcode-editor-pro.js loading... shortcode-editor-pro.js keyup bind
And then once you enter your m3u8 HLS URL:
shortcode-editor-pro.js hls_decoder_show_hide
I’m sorry that this takes so long, there must be something special about your website. With so many WordPress plugins out there it’s not always easy.
Thanks,
MartinHello Martin,
the HTML source doesnt contains “fv_wp_flowplayer_hlskey_decoder”.
I also installed the FV Player Pro plugin as you recommended, but still the field fo the “Encryption key” doenst show off.The Console shows that, what you mentioned (see image).
What does it mean – how can i can fix this issue?
Should i try to paste the hlskey with “hlskey=…” directy in a shortcode?
Is there a setting that i have to enable to get shown the HLS Key Field by using a .m3u8 file?Thanks,
HoshangHello Hoshang,
thank you for checking these debug logs.
It’s like you said – “Amazon AWS Decoder (Pro)” settings have to be filled in, otherwise the Encrypted HLS fields won’t show up. But since these AWS Decoder settings are not required for MediaConvert encrypted HLS it shouldn’t be depending on that at all.
I prepared the fix for this for the next FV Player Pro release. It will be in the Release version too. If you can’t wait for the new release, please just reinstall FV Player Pro again.
Thank you for your bug report and cooperation!
Martin
Hallo Martin,
thanks, now the field for the key shows off.
But still there is a Problem. I went through every steps of the AWS MediaConvert Guid but the video doesnt play on my website. It shows a network-error (see image1 below). By the console i get the error shown in image2).
Please, can you help me solving this Problem – I went a few times through the steps of the guide – but still i get alway this error.Is there something else i have to do?
Thanks,
HoshangHello Hoshang,
to get HLS playback on desktop browsers you need to follow the steps here: https://foliovision.com/player/video-hosting/hls#hls-js
I see that it’s not easy to figure out, we will mention this last step in our guide.
Thanks,
MartinHey Martin,
i have enabled the HLS.js in the settings.
And then it is not clear what to do. Should I put the given Row (Access-Control-Allow-Origin: *) (see image1) somewhere? If yes where and how?
And also, do i need to go through the step “ENABLING CORS IN AMAZON S3” (I am using S3) and therefore put the given content (see image2) in the CORS Configuration of my usen amazon s3 bucket?
Do I also need a .xml file in the bucket? If yes, with which content?
Thanks,
HoshangHi Hoshang,
Yes, you need to have CORS headers enabled for the bucket where you want to store your .m3u8 files for the HLS and also you need to set up the headers for your server.
To do this follow step-by-step the guide Martin sent to you earlier.
1. You need to add those headers to your server response, there’s link a in that guide right under the header with a detailed guide. (you can actually see this link the screenshot)
2. You need to copy and insert that XML code into the bucket properties, it’s in-depth explained later in the guide
As we said earlier, it would be super time-consuming for all of us to explain everything to you step by step via this Forum. Please consider buying our MediaConvert HLS expert set-up. We are able to configure and properly test everything for you within a few hours.
Thanks,
JurajHello Hoshang,
we will improve that guide, when it says:
To allow simple CORS requests from your server, you will need to add this header to your server’s response:
…it actually means that the CORS headers have to be enabled on the server/CDN which hosts these videos.
Other than that it’s really straightforward, it tells you what to do with that XML – paste its content into a specified place in S3 bucket configuration.
Thanks,
MartinHello Martin and Juraj,
thanks for the reply.
1. I have now already put in an crossdomain.xml -file in the bucket where my videos are with this content:
<?xml version=”1.0″?>
<!DOCTYPE cross-domain-policy SYSTEM
“http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd”>
<cross-domain-policy>
<allow-access-from domain=”*” />
</cross-domain-policy>2. I went through the step “ENABLING CORS IN AMAZON S3” (I am using S3) by putting in the CORS-Configuration part of the buckt this content:
<?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>But I didnt figure out where exactly i have to put this line: Access-Control-Allow-Origin: *. What is meant by server – is it Amazon s3, where my videos are in? Can you please help me with this.
I get the following in the comnsole right now – see image1.
Thanks for your help,
HoshangHello Hoshang,
that “Access-Control-Allow-Origin: *” line is what appears in the HTTP headers for your HLS video files once you have the CORS properly configured.
And it appears you do what it properly configured now.
If you are getting that “RangeError” it means you are not using the right HLS decryption key or your video URL doesn’t match the key in the Static Key URL. You need to double check step 15. in our guide: https://foliovision.com/player/securing-your-video/mediaconvert-encrypted-hls-guide
Thanks,
MartinHello Martin,
thanks. I tried it a couple of times but it still doesnt work when i use the DRM protection (step 15 and 16 in the guide) by MediaConvert. Without this steps – which means by not using the DRM-Protection – it works well. But the files are then not protectet.
I think maybe the fv player is just working with cloudfront when using the DRM protection? Could it be like this? Or can you suggest a solution for that why it is not working with the DRM part. As said, i treid it lot of times.
Thanks,
HoshangHello Hoshang,
are you sure the HLS Static Key URL domain and protocol is matching your WordPress homepage domain and protocol? You can use the video checker too and send us the video report there: https://foliovision.com/player/basic-setup/how-to-use-video-checker
Thanks,
Martin