So I am new to HTML and I am working on Visual Studio Code. I am currently trying to make a page that has a video on it. I made a simple code that I thought would work but it doesn't. After entering the page you see the video player but the video is not playing. The name of the video is bodybuild.mp4 and is located in videos.
This is my code:
<html>
<head>
<title>Video_page_test</title>
</head>
<body>
<video controls>
<source src = "videos/bodybuild.mp4" type = "video/mp4">
</video>
</body>
</html>
Possible solutions:
Try using an absolute path (ie: C:/user/videos/video.mp4)
Or
Put the videos folder in same place as your HTML file before testing in a web browser (double click the HTML file in Explorer, not just running HTML via debugger/IDE).
Related
I'm hosting on wix and want to embed a simple audio player to play a livestream. I have tested the code in w3schools and the audio plays. However, when viewing the wix site with the same code embedded, the player loads with a runtime of 0:00 and won't play, even when clicked.
I can only assume there is a conflict with the iframe wix runs the code in.
The live page is at https://www.joetimothycoleman.com/bewilderments-22
Any solutions welcome!
<html>
<Head>
</head>
<body>
<audio controls autoplay>
<source src="http://locus.creacast.com:9001/slawica_puszcza_zielonka.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I have some video sources as I stated below
Sample Video Source: https://r1---sn-5hne6nsr.c.2mdn.net/videoplayback/id/be1889e136a157dd/itag/37/source/doubleclick_dmm/ctier/L/acao/yes/ip/0.0.0.0/ipbits/0/expire/3747290803/sparams/acao,ctier,expire,id,ip,ipbits,itag,mh,mip,mm,mn,ms,mv,mvi,pl,source/signature/388EE84E16EB00C9F843F9A73533592875F7AC21.4849C933939EDFCC5C988E8F948B2DACD1A5505E/key/cms1/cms_redirect/yes/mh/NQ/mip/83.162.138.194/mm/42/mn/sn-5hne6nsr/ms/onc/mt/1609252593/mv/m/mvi/1/pl/14/file/file.mp4
When I copied and pasted in the browser it is working seamlessly but when I give it to an HTML Video tag like below, it does not work.
<!DOCTYPE html>
<html>
<body>
<video controls="" autoplay="" name="media">
<source src="https://r1---sn-5hne6nsr.c.2mdn.net/videoplayback/id/be1889e136a157dd/itag/37/source/doubleclick_dmm/ctier/L/acao/yes/ip/0.0.0.0/ipbits/0/expire/3747290803/sparams/acao,ctier,expire,id,ip,ipbits,itag,mh,mip,mm,mn,ms,mv,mvi,pl,source/signature/388EE84E16EB00C9F843F9A73533592875F7AC21.4849C933939EDFCC5C988E8F948B2DACD1A5505E/key/cms1/cms_redirect/yes/mh/NQ/mip/83.162.138.194/mm/42/mn/sn-5hne6nsr/ms/onc/mt/1609252593/mv/m/mvi/1/pl/14/file/file.mp4" type="video/mp4">
</video>
</body>
</html>
What am I missing? Any idea?
I figured out why your video tag was not playing, run your HTML with all your browser extensions off, The video tag is being blocked by my adblocker. After I turned it off it was working as regular.
The reason behind it because adblockers run in a privileged mode, their operation does not trigger events in the nonprivileged script space.
To work around it you have to Detect adblockers.
Yesterday I started working with HTML5 Autoplay and also adding HTML5 Tag aka Subtitles.
I am having trouble to understand why when I am playing a sample of an *.mp4 video it can display the subtitles through the relative path (file:///Users/user/Desktop/test.html) but if I execute the file through the Pycharm for example it produces this file path (http://localhost:63343/Desktop/test.html) on the browser and it loads the subtitles just fine.
So I am wondering if there is a way to solve my problem. How can I load the subtitles through the absolute path (file:///Users/user/Desktop/test.html). Is there something that I am missing here?
I am using google-chrome as a web browser.
Update: I was trying to debug my web page and I got the same error as Crossorigin errors when loading VTT file. Where same people say that they were able to solve this problem by Disable same origin policy in Chrome. I tried restarting my browser with the following way (open -a Google\ Chrome --args --disable-web-security) but it did not had any difference on my problem.
Update 2: I just tested the same problem on alternative browser Safar (Version 9.0.2 (11601.3.9)). On Safari I am able to see the subtitles with the (file:///Users/user/Desktop/test.html) and with (http://localhost:63343/Desktop/test.html) the video is not displayed.
With Google-Chrome (Version 47.0.2526.106 (64-bit)) I can play the video both ways but I can only see the subtitles with (http://localhost:63343/Desktop/test.html).
Further search on the web helped me to find CORS settings attributes where the user can set crossOrigin property either to (anonymous) or (use-credentials). I also tried that, the result was black screen in video.
So in conclusion I believe is a security issue and not a path file issue.
Sample of test.html code:
<!DOCTYPE html>
<html>
<head>
<title>Sample of video with vtt file</title>
</head>
<body>
<video id="video" controls preload="metadata" width="350" height="250" autoplay>
<source src="SampleVideo.mp4" type="video/mp4">
<source src="SampleVideo.ogg" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="subtitles-en.vtt" default>
</video>
</body>
</html>
Sample of subtitles-en.vtt file code:
WEBVTT
Introduction
00:00:00.000 --> 00:00:02.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour
Disclaimer
00:00:02.000 --> 00:00:05.000
This is just a track demo using VTT
I see that you have solved it yourself, but you are correct, it is indeed a security issue in that you cannot access files on the local filesystem that way.
I actually have a probleme playing some MP4 video on my phone.
I'm on android 5.0.1, using Chrome 47 with this simple html code :
<!doctype html>
<html>
<head>
<title>ssqsq</title>
</head>
<body>
<video controls="" autoplay="" name="media">
<source src=x type="video/mp4">
</video>
</body>
</html>
Let say 'x' is a variable where is my source address.
When the address is : http://www.w3schools.com/html/mov_bbb.mp4 , Chrome read the video without probleme.
But when x is : http://someurl/files/atoms/video/mov_bbb.mp4
(it's the same video, literaly. I download from w3s to upload on this website), my chrome isn't abble to read the video
'someurl' has an .htaccess, but this not seem to be the probleme since the video play normally on chrome(on my desktop) and even on my androind (using FireFox 43.0)
I have thinking of codec probleme when i was working with other video, but this one (mov_bbb.mp4) does not change between w3s and 'someurl'
I don't know where it could come from.
Not the codec, because video play well on w3s.
Not the server configuration because the video play well on firefox and on desktop...
Advice and help would be thankfull!
The mp4 video does not play from localhost.
But mp3 audio works.
i.e.
Following code for playing video (stored as C:\inetpub\wwwroot\video\testVideo.html) does not work when accessed through (http://localhost/video/testVideo.html)
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
But, following code for playing audio (C:\inetpub\wwwroot\audio\testAudio.html) works when accessed through (http://localhost/audio/testAudio.html)
<!DOCTYPE html>
<html>
<body>
<audio width="400" controls>
<source src="audip.mp3" type="audio/mp3">
Your browser does not support HTML5 video.
</audio>
</body>
</html>
However, they both work when webpage is launched by double clicking on html file i.e. webpage is accessed through (file:///C:/inetpub/wwwroot/audio/testAudio.html) or (file:///C:/inetpub/wwwroot/video/testVideo.html)
Please explain what am I doing wrong. And how to make video play from localhost.
I am using following browsers:
IE 11.0
Chrome 44.0
Firefox 40.0
I finally figured it out.
The video doesn't play via localhost, because IIS localhost in Windows doesn't contain MIME type entry (video/mp4) for .mp4 file format.
To make this work, a MIME type entry should be added in following way:
Open IIS Manager
Select your machine from Connection panel
From middle panel, double-click 'MIME Types'
Right-click on the list and select 'Add' option
Add file extension and MIME type e.g. for MP4 videos, file extension: .mp4 and MIME type: 'video/mp4'
Thats it.
Now refresh your page and Bingo!. It works.