I am new to HTML and CSS (So that may be the issue). I entered the following code into my html doc:
<video controls width="700">
<source src="video/PristineCustomCleansVideo.mp4" type="video/mp4">
</video>
The video I want to play is inside a folder called video. The index.html and the video folder are nested inside a folder together.
The video shows up on the site I'm making as a gray rectangle with controls (in a Brave browser). When I press play nothing happens. I also tried opening my page in Firefox and within the gray rectangle it says "No video with supported format and MIME type found."
I looked up this question and have found so many confusing suggestions. Whatever you recommend, please do it as if I know very little about computers (I thought I knew a good amount until reading some of the responses and can't follow what I should do. lol)
Another issue I am considering is if I have to do a lot of work to get the video to play, will others that I send my website URL to have issues as well? This is for a class project. I have to put everything on the school's server and share the URL with the teacher.
If your index page and the video are located in exactly the same place you do not need the video folder in the path to your file. The following should work.
source src="PristineCustomCleansVideo.mp4" type="video/mp4"
Related
I have a webpage with an audio player - normally the code would look like this
<audio controls="controls" preload="auto">
<source src="http://the_full_path/file_name.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
I want people to be able to listen to the file using the player without being able to download the file its playing. These are the first steps I took:
was adding controlsList="nodownload" to the player
disabling right click oncontextmenu="return false"
The problem: from any browser going to menu 'view-> page source' or clicking F12/Cmd+u will show the code thus the link will be reviled.
How can I achieve my desired outcome?
'and obviously there is a way to do it'
No there's not !
#zero298 answer is perfectly right(any resaerch you will do will said the same and you see your question is commonly asked for years with same answer.
All stuff you can do can easily be override because in order to use a file client side the file is download on client(cache) in order to be use by browser in local place.
Look to how WWW work and you'll understand better i think:
web server send(upload) HTML and others files related to client who get it(download) for use.
That's root of a network and can't be otherwise. If you need anything to be shared on a network you've to send it. So you can see/use(an get) a file who is not shared nor block a file once it is send.
I have a page that displays multiple videos using html video tags. The code looks like the below snippet:
<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>
The class is simply a class that dynamically sets the width, height, etc.
The video looks and plays very nicely in all browsers except for Firefox. All of the videos on the website using these tags are upside down in Firefox. I can't seem to find anything online about people having similar problems. In fact, when I go to other websites using identical video tags and video extensions, etc., the video displays perfectly on their site for me in Firefox.
Here is the website with the upside down videos for reference:
http://www.larrykrannich.com/video.html
The videos display upside down locally, on a local server, and hosted on a real server.
Any help would be greatly appreciated.
This is a firefox problem, I have seen that several people have complained over and over about this problem but all to no avail. it only happens when the video is recorded from mobile, firefox doesn't seem to use the camera details to encoded rotation that came along with the mobile video. for the main time you have to figure out a fix for yourself, you can use css transform to rotate the video tag, but one problem with that is that it will rotate the video control with it.
you can use videojs, then add the rotate plugin, you can just google it. it will help rotate for video.
you can do something like this
if ( isfirefox ) {
<video class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
<source src="video-source" type="video/mp4">
</video>
}
also, there is a recent issue in chrome update that compress mobile video as well. still looking for a fix for it
It seems to have something to do with rotation metadata in the video files. The problem can be solved by transcoding and rotating the video. Similar post here
Most likely, you have recorded the video upside down, without realizing it - which can happen, e.g. when using a smartphone-camera.
There are video-players, that auto-correct for such things, which might be, why you didn't realize the video being upside-down.
There is a free Videoplayer called VLC, which you can correct this with by rotating the video.
Get it here and install it, if you don't already have it:
http://www.videolan.org/vlc/
Steps:
Open video in VLC media player
Pause the video, if it's too short to keep running, while you perform the other steps
In the upper menu, navigate as follows:
Tools
Video Effects
In the window, that just opened go to the Geometry-tab and do the following:
Check the box "Transform"
Select "Rotate by 180 degrees"
Your video should now look nice and right side up
To save your changes:
In the upper menu click, navigate as follows:
Media
Convert/Save
Choose, where you want to save the file.
Upload the rotated video in place of the upside-down one.
Now your video should be displayed correctly :)
Just as the title says. I've been working on a site and had added a big html video for the main page.
I looked over online...myme types checked, h264 encoding checked. I looked over old versions of the file i've been working on and noticed an old pure HTML file which loaded the video in all browsers with no problem (which I guess discards any encoding or video quality issues)
It all was working neat. Even displaying in firefox, chrome an IE. BUT for some reason the video does not load in IE whenever the file extension for the page it's on is .PHP. To be precise, whenever i try it from my LOCALHOST (XAMP with Apache server)
I also checked the dev tools and under network it does show it as the right content type and no error whatsoever (getting normal 200 result)
Here's the snippet of the video tag used:
<div id="video_container">
<video autoplay loop poster="video.jpg" id="header_vid">
<source src="imagenes/video.mp4" type="video/mp4">
</video>
LOL, and just noticed...not even the poster image is showing in IE...wtf.
I'm so confused, could anyone enlighten me a bit please? Could it be something related to the path used? been digging around the net for days _
Check if your url is formed properly when you are using .php extension on IE. Same issue addressed quite a few time here.
mp4 from PHP - Not playing in HTML5 Video tag ||
Play mp4 file through php in HTML5 Video Tag in Chrome?
I notice IE doesn't like the properties without value, so try
<video autoplay="" loop="" poster="video.jpg" id="header_vid">
I have a simple web page written in HTML for testing video streaming.
<video controls name="media">
<source src="external_url.mp4" type="video/mp4">
</video>
That's work in local, but when I upload the page on my free web hosting, the page doesn't load any video. Is there a workaround? Maybe using an embedded player?
update
I've discovered that's a problem related to video. Unfortunately I cannot link it because it's for a private presentation, but I've tried with other videos and that works well. Any idea why my video doesn't play?
Please check that the URL is intact.
Check if there might be some file discrepancies. The control currently supports mp4, ogg, and webm as seen here.
Use the canPlayType() method to test the site AFTER the upload - just to be sure we're covered on that front. See here for the DOM reference.
You can fiddle around here if you don't want to have to upload the site first before live-testing it.
Hope that helps.
How do you upload the video? If FTP, text transfer mode may have ruined the file. The hosting (especially, a free one) can impose a limit on the file size (uploaded or served) too. Or even on content types (e.g. narod.ru didn't allow to read files directly, serving a "download page" on an attempt instead).
Try to download the video file directly and compare it with the reference one.
I have used HTML 5 audio tags like the following
<audio controls="control_2">
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\WAV\home_page_readout.wav" type="audio/wav"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\MP3\home_page_readout.mp3" type="audio/mp3"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\ogg\home_page_readout.ogg" type="audio/ogg"/>
</audio>
Now when i load the page when it is not uploaded to a server it manages to work on chrome and IE, however on other browsers the player appears, but there appears to be no file as nothing happens when i press play.
Now when i put the page to the server (I am using USB webserver V8.2) i get nothing no matter what browser the players dont even show. I have tried changing the links to relative and nothing and ive checked that all my files are there and they are. They work when I click on the actual file on the server so i dunno.
Any help would be appreciated thanks :)
To solve the second half of your question, and potentially the first, use relative paths to load the audio files. So if your web server loads the file from /var/www/website/index.php, places the files in a closer path, ie /var/www/website/sounds, and then load the files from ./sounds/FILE_NAME.EXTENSION