I'm using video.js to embed videos with HTML5 and the video simply plays too fast. I press the play button and I can tell it's at least 1.5x the proper speed.
Any ideas?
EDIT: Sorry! No code. Here you go. By the way, it's copied from videojs.com itself.
<video class="video-js vjs-default-skin" controls
preload="auto" data-setup="{}">
<source src="http://foo.bar/wp-content/uploads/date/video.mp4" type='video/mp4'>
</video>
No webm video for now, I'll work on converting the mp4 to that later.
Also, I'm using this in WP; the admin posts videos that we uploads. No video width, height, poster, or id defined.
Most likely your video is not properly encoded to be compatible with web browsers.
How did you get the video file in the first place
Where does it work
How did you preprocess it for web
Related
I’ve tried setting them to be true and changing the order in some hope it will help. So far it’s not working I’m sure the videos silent but I muted it anyway. I want it to autoplay and loop. It does neither.
<video loop autoplay muted class="VideoMain">
<source src="A.mp4" type="video/mp4">
</video>```
I don't have A.mp4, but after trying your code with another MP4 video, it seems to work fine.
<video loop autoplay muted class="VideoMain">
<source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>
Since your code is fine, the problem must be with the video file.
Ensure that your video file is not corrupt and can be accessed.
Your MP4 is not from a live stream (ie: is not a fragmented-MP4, that needs MSE to play).
Ensure the MP4 is containing H.264 video (and AAC audio, if got sound).
MP4 can sometimes have H.265 video codec. Only supported browser is Safari (Apple).
Use MediaInfo to check video details and then confirm if your browser supports that setup.
Use a Hex editor for your OS to check the video file's bytes. A working MP4 should show moov in second or third line. If not, then video is not playing because metadata is not available (needs moving from back of file to the front).
Also check that you have saved and are accessing your site through the development version. All are common mistakes we make in the heat of development.
I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I have this video tag:
<video autoplay id="Video2">
<source src="http://myurl/firstanimation01.mp4" type="video/mp4">
<source src="http://myurl/firstanimation01.ogg" type="video/ogg">
</video>
What I would like to achieve is with jQuery or some other approach download enough content from the video before it starts to load. On some slow connections we get complaints from customers that the video is lagging, and there are often moments when the customers get stuck because of that.
What approach is recommended for these issues? Should I download whole video locally, set the path dynamically in jQuery and once downloaded start the video?
Some other approach for progressive loading?
I recommend trying the preload HTML5 attribute setting.
<video preload = auto>
I agree with Mitchell's suggestion, but I would suggest trying preload="metadata" first.
I would also suggest providing a link for the users to download the video themselves if they wish to.
For some reason, my video on wordpress wont show up when I use iframe to view it. In I.E., it automatically loads the video into the windows media player versus playing through the iframe.
I am using a local mp4 for the video's. From what I can tell, there's no issues with my I-Frame code. Anyone got any idea's? I cant get it to play in the iframe!
You should not be using <iframe>'s like that. In the past it was a relatively more popular method, but extremely unreliable even back than.
What you should do instead is either encode your video's as .flv's and use flash to play them, or encode them for the 'new' html5 <video>-tag for which no additional plugins are required. To get the best results with the new tag you should convert for 3 different codecs, but H.264 gets you quite far. This is how it ends up looking if you have converted multiple formats:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
And you can read more about it here.
Can anyone give a concise instruction on how I can have a flv play from my html page please?
With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480"
data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
<source src="video1.flv" type="video/x-flv">
</video>
</body>
For further details: http://videojs.com/
Actually, I did not find information specified about playing flv files. But it works fine. :)
You can use other video formats using video.js all you need to change is type as...
<source src="..." type="video/mp4">
Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.
See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.
I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/
It's clean, minimal and fairly simple to setup.
You can try https://github.com/Bilibili/flv.js
With flv.js, You'll get:
Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos
Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.
Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.
Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.
Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.