Hi,
I was trying things with the hls asset which is very cool to improve integration of video in our platform. But, I can’t make it work on Safari when it’s a private video. It returns an 404 error on the loading of the manifest.m3u8. I’m working on local.
If you have an idea to fix this.
Thanks and have a nice day,
Sylvain
Hi Sylvain,
We’ve just tested a video on Safari without any issue.
The error 404 on hls is correct because i assume your token has already been burned
Each time you call the hls you need to generate a new token doing a get on your video.
Hope it helps
Hi,
I’m not sure it is that, the same script works fine on Firefox or Chrome and I just realized that the player asset (to embed in an iframe) doesn’t work neither with Safari in my script. So, I wondering what I’m doing wrong, could share your code please?
Have nice day,
Sylvain
I should specify that, with the player asset, the error on Safari is :
Failed to load resource: Origin https://embed.api.video is not allowed Access-Control-Origin
Thanks
I don’t use any code, just postman collection provided in doc to get a private video embed that i renew each time i use it.
The error you return corresponds to a CORS issue, which has nothing to do with the token but is a consequence of its unavailabilty.
It still let me think that your token has already been used.
FYI note that copying an embed URL containing the token value in “slack” or “skype” for example without quotes around the url will result url execution and immediately token use.
You can share your code if you want
OK I will study that, thank you
Hi,
I tried some things, but the issue is persistent with Clappr on Safari and private videos but works fine with Firefox, here the code:
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
</head>
<body>
<div id="player" style="height: 600px;"></div>
<script>
const player = new Clappr.Player({
parentId: "#player",
hlsjsConfig: {
xhrSetup: (xhr, url) => xhr.withCredentials = true
},
disableVideoTagContextMenu: true,
autoPlay: false,
muted: false,
loop: false,
height: '100%',
width: '100%'
});
player.load('HLS_URL');
</script>
</body>
</html>
I cant’ get this working with the code in your documentation (Step 4 : Embed the videos)
Thanks
Hi,
After some research according to your problem it seems that by default Safari don’t allow to load/play resource locally. You must disable this restriction by following this step:
Hope that helps.
Best regards.
Thanks Anthony, I tried this but it not working, sadly.
But I have some logs from hls.js:
[Log] [log] > attachMedia (clappr.js, line 21793)
[Log] [log] > media source opened (clappr.js, line 21793)
[Log] [log] > loadSource:https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/manifest.m3u8 (clappr.js, line 21793)
[Debug] [debug] > Loading playlist of type manifest, level: 0, id: null (clappr.js, line 21793)
[Debug] [debug] > Calling internal loader delegate for URL: https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/manifest.m3u8 (clappr.js, line 21793)
[Log] [log] > trigger BUFFER_RESET (clappr.js, line 21793)
[Log] [log] > manifest loaded,4 level(s) found, first bitrate:440000 (clappr.js, line 21793)
[Log] [log] > 1 bufferCodec event(s) expected (clappr.js, line 21793)
[Log] [log] > startLoad(-1) (clappr.js, line 21793)
[Log] [log] > switching to level 0 (clappr.js, line 21793)
[Debug] [debug] > Loading playlist of type level, level: 0, id: 0 (clappr.js, line 21793)
[Debug] [debug] > Calling internal loader delegate for URL: https://cdn.api.video /vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/360/manifest.m3u8 (clappr.js, line 21793)
[Log] [log] > main stream:STOPPED->IDLE (clappr.js, line 21793)
[Log] [log] > audio tracks updated (clappr.js, line 21793)
[Log] [log] > subtitle tracks updated (clappr.js, line 21793)
[Error] Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/360/manifest.m3u8 due to access control checks.
[Error] [error] > 0 while loading https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/360/manifest.m3u8
(fonction anonyme) (clappr.js:21793)
readystatechange (clappr.js:22978)
(fonction anonyme)
[Info] [info] > A network error occured while loading a level-type playlist (clappr.js, line 21793)
[Warning] [warn] > level controller, levelLoadError, retry in 1000 ms, current retry count is 1 (clappr.js, line 21793)
[Warning] [warn] > level controller, levelLoadError: switch to 3 (clappr.js, line 21793)
[Error] Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. (manifest.m3u8, line 0)
[Debug] [debug] > call to loadLevel (clappr.js, line 21793)
[Log] [log] > Attempt loading level index 3 with URL-id 0 (clappr.js, line 21793)
[Debug] [debug] > Loading playlist of type level, level: 3, id: 0 (clappr.js, line 21793)
[Debug] [debug] > Calling internal loader delegate for URL: https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/1080/manifest.m3u8 (clappr.js, line 21793)
[Error] Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/1080/manifest.m3u8 due to access control checks.
[Error] [error] > 0 while loading https://cdn.api.video/vod/vi250QFTfceARvdlDrUPsYK4/token/0ee2ee12-3dd3-48ca-bced-597389d6a17c/hls/1080/manifest.m3u8
(fonction anonyme) (clappr.js:21793)
readystatechange (clappr.js:22978)
(fonction anonyme)
[Info] [info] > A network error occured while loading a level-type playlist (clappr.js, line 21793)
[Warning] [warn] > level controller, levelLoadError, retry in 2000 ms, current retry count is 2 (clappr.js, line 21793)
[Warning] [warn] > level controller, levelLoadError: switch to 2 (clappr.js, line 21793)
[Error] Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. (manifest.m3u8, line 0)
I don’t know if it can help you to undestand the issue.
Thanks,
Sylvain
Hi,
I sent you an email to continue solving your problem with different tests to be performed and with code samples to execute.