Search code examples
htmlangulartypescripthtml5-videoplyr

Video does not load - chrome: Not allowed to load local resource

I'm using the plyr library to upload a video. The video URL comes from a server, however the video is not loaded and I get the following error in chrome: Not allowed to load local resource.

Does anyone know why this error appears?

HTML

 <video id="plyrID" controls playsinline [poster]="poster" (plyrPlay)="played($event)"
                (plyrInit)="player = $event">
                <source src="//MyServer/videos/video.mp4" type="video/mp4">
 </video>

Error

img

Solution

  • If you look at the error message you are getting above you will see that it is trying to open the video from a URL starting with:

    file://

    The browser is interpreting that this file is a local file and not on a server - i.e. even though the 'video URL comes from a server' as you say the URL which the browser is seeing is a local URL.

    If you want the source to be a video on a server your HTML code you should either see an absolute server source URL like this example:

    <video id="testVid" controls preload="auto">
    <source src="https://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type='video/mp4'>
</video>

    Or a URL which is relative to your own web server serving the current page like this:

    <video id="testVid" controls preload="auto">
    <source src="/MyServerMoviesFolder/ToS/tears_of_steel_720p.mov" type='video/mp4'>
</video>

    You can see some more examples here: https://www.w3schools.com/html/html_filepaths.asp

    If, in your example, 'MyServer' is a valid 'authority name, e.g. 'MyServerDomainName.com:8080', then you URL is indeed a valid URL according to the RFC. It is referred to as a network-path reference URI and described in section 4.2 of the RFC linked below.

    Different browsers may treat this differently, and Chrome does seem to default to a local file when it sees a URI starting with a double forward slash if you enter it directly in the URL tab of the browser.

    However, with a valid 'authority' in the URL it should resolve to a video - see the example snippet below which is tested on Chrome and Safari and plays the video:

    <video id="testVid2" controls preload="auto">
    <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type='video/mp4'>
</video>

    If this is not working in your case and defaulting to a local file, it seems most likely that URL does not contain a valid 'authority' part. However, in this case it should give a name not resolved case on Chrome, as in the snippet below:

    const player = new Plyr('#plyrID');
    <video id="plyrID" controls playsinline [poster]="poster" (plyrPlay)="played($event)"
                (plyrInit)="player = $event">
                <source src="//MyServer/videos/video.mp4" type="video/mp4">
 </video>

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>

    It is worth noting that this is a very specific URL format and it may be that you don't actually need to use this format. It is usually used so that the request uses either HTTP or HTTPS in line with the current page. See discussion here and the definition in the RFC also: