Why will mp4 video not work when http basic authentication enabled? - safari

I am trying to get video to play in an HTML5 video tag using the following code:
<video id="video" width="768" height="432" controls>
<source src="http://example.com/videos/example.mp4" type="video/mp4" />
</video>
Initially this was not working and I tracked it down to being an issue with Basic Authentication being enabled on the domain. However, if I try reenabling it in the .htaccess file as follows:
AuthUserFile /folder/containing/.htpasswd
AuthType Basic
AuthName "Members Area"
Require valid-user
The video player just stalls on the "Loading..." screen. Additionally if I try to access the file directly the playback in the browser reverts to using the quicktime controls and not the HTML5 controls you get when the authentication is turned off
At present the only solution I have is to remove / avoid requiring authentication in the folder containing the movie files for the site. However, I preferably need to keep the authentication enabled across the whole domain.
Therefore I am wondering if there is a way to serve video content which is located behind basic authentication.
Note: I am currently working to get this working in Safari and hence the focus towards the mp4 format.

You can use like this:
<video id="video" width="768" height="432" controls>
<source src="http://username:password#domainname.com/video/video.mp4" type="video/mp4" />
</video>
This can help I think.

Related

Why Internet download manager doesn't come up in this page?

I noticed that IDM (internet download manager) does not come up in this page when the video starts playing: https://www.w3schools.com/html/html5_video.asp
the code behind this page is a simple html5 video tag:
<video id="video1" style="width:600px;max-width:100%;" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
When I use the exact same code with the same video in localhost, IDM starts. I have no special setting or exclusions in IDM. So what is the secret behind this page that IDM is not starting?
Some videos are protected by Copyright and use special protected protocol. It is restricted to save any data recived by this protocol. IDM does not support it for legal reasons.(Reference)
To check that this is the reason why video is not shown, you need to open "Options->General" IDM dialog and press "Edit" near "Customize IDM Download panels in browsers".

browser autoplay policy. How does autoplay work in Netflix?

I've developed an application like netflix which streams video.
I'm working with video.js.
when I try to play unmuted video, it throw error says that
"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https:// goo.gl/xX8pDD"
I can understand what the policy is, but I wonder how autoplay works in Netflix.
Video Preview on netflix works with sound well on chrome and safari.
as soon as I access the video chat page in Netflix party, it turns to play with sound.
I wanna know what they do and apply them to mine.
Thanks.
It seems some sites are whitelisted:
If you don’t have browsing history, Chrome allows autoplay for over 1,000 sites where we see that the highest percentage of visitors play media with sound.

How to make video auto play in every browser for Shopify website

I'm using the retina theme for the Shopify site. I'm using video on my home page but it's not autoplay in the chrome. another browser it's playing well...please tell me to need to customize code for autoplay in the chrome browser?
Chrome can autoplay the videos with sound off, so you'll need to add muted attribute.
<video autoplay muted>
...
</video>
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

m3u8 hls vimeo cross domain videojs

I am trying to play a vimeo m3u8 hls video in videojs player. I am getting cross domain error. Can anybody help me.
My code.
<video autoplay id="content_video" class="video-js vjs-default-skin"
poster = "//test.waytogrow.pl/wideo/videojs/posters/android.png" controls preload="auto" width="640"
height="360">
<source src="https://player.vimeo.com/external/155002167.m3u8?p=standard&s=1d09b138bbb4218361013c45d706889df4a80fee"
type="application/x-mpegURL" ></source>
</video>
Error
XMLHttpRequest cannot load https://player.vimeo.com/external/155002167.m3u8?p=standard&s=1d09b138bbb4218361013c45d706889df4a80fee. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.
You can't fix this. Only Vimeo can, by adding CORS headers to the responses. Otherwise you need to host the video elsewhere.

.mp4 video doesn't work on my web page

I tried to add a .mp4 video on my web page. And it doesn't work, I got an error in firebug. Bellow is the code:
<video width="320" height="240" controls>
<source type="video/mp4" src="08.mp4" >
</video>
Error:
"NetworkError: 404 Not Found - http://localhost/08.mp4"
HTTP load failed with status 404. Load of media resource http://localhost/08.mp4 failed.
All candidate resources failed to load. Media load paused.
I tried with a .m4v video, and it works fine:
<video width="320" height="240" controls>
<source type="video/mp4" src="Big_Buck_Bunny_Trailer.m4v" >
</video>
If I tried to access http://localhost/08.mp4 I got the following:
A 404 error occurred
Page not found.
The requested URL could not be matched by routing.
No Exception available
Both videos are in the same folder.
Codec information:
Can you tell me please where is the problem?
I solved the problem.
Because I use zend2 framework the folder with video should be in the public folder.
First I put the video in other folder, now I moved it in public and works fine.