How can I play an mp3 and generate a wafeform image using HTML5 or Jquery?
Thanks Advance!
Playing an audio file with HTML 5 is pretty straight forward:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Above Example from W3Schools
As for generating a waveform I'd check out waveform.js
Related
The audio is not displaying in php file but the same audio is working on .html file. How to fix it can anyone help me please? Thanks
<audio control>
<source src="samples/narcon.mp3" type="audio/mp3">
</audio>
So one of the cool things about php is that you can close and reopen the tag when needed so if you have the php file open you can do something like this
<?php
some php code is here
?>
<audio control>
<source src="samples/narcon.mp3" type="audio/mp3">
</audio>
<?php
code after the html
?> //end of php file
I have been reworking a web site to optimize for SEO. One thing I did is to optimize Images using Googles Webp Format. But Webp is not supported on any version of Safari.
My question is: What can I do to load one image (Webp) if supported or load another like JPG if not supported.
It could be great if it is something like the Audio or Video TAG
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Add your code like as below and it should most probably work.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg">
</picture>
More details are mentioned here in this link.
I assume you are using only 1 image in src (in img tag) if that fails to load then you are trying to loan any other image. So, You can use
<img src="invalid_link" onerror="this.onerror=null;this.src='other_image_url';">
Hope this helps.
in video tag src we are trying to give src as a ftp resource its not picking it up. Can somebody give some direction on that.
<video src='ftp://server/pqr.mp4' />
I suspect that's because to allow efficient usage, the browser makes HTTP range requests, which are part of HTTP, not FTP. FTP is a pretty old protocol, and isn't really appropriate here for lots of reasons (no range requests, basic/no caching info, etc).
something like this
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
<source src="http://movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The issue here is :
Loading an FTP sub-resource through an HTTP / S page is not allowed
This is for security issues, see https://bugzilla.mozilla.org/show_bug.cgi?id=1361848
Use this code:
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
Can someone kindly let me know what I am missing here? I want to play a video using html5 video tag by calling a php script. I don't want to display the source of the video directly.
HTML file: video.html
<video width="400" controls>
<source src="getVideo.php" type="video/mp4">
</video>
PHP file: getVideo.php
<?php
$file_name = 'media/abc_video.mp4';
$file_size = (string)(filesize($file_name));
header('Content-Type: video/mp4');
header('Content-Length: '.$file_size);
readfile($file_name);
?>
The html page is not loading video, only a blank video player ...
I am able to play the video directly so permission should be working:
HTML file: video.html
<video width="400" controls>
<source src="media/abc_video.mp4" type="video/mp4">
</video>
Many thanks,
I am creating a website, where users can upload their videos. I'm using the HTML5 video player from http://videojs.com/. How can I make HTML5 player play only MP4 on all browsers? If that is impossible, are there any ways to maybe convert MP4 to other formats?
Please read this blog post for the updated info: http://blog.zencoder.com/2013/09/13/what-formats-do-i-need-for-html5-video/
[Old Answer: Outdated]
If you provide both Ogg Theora & MP4 format then, you can cover almost all modern browsers (ref). And, with some small effort you can find a lots of PHP implementation of the most popular & powerful open source video converter (ffmpeg). Or, you can make a small class for it too. Then use as -
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.ogv" type='video/ogg'>
</video>
PHP ffmpeg wrapper libs-
http://code.google.com/p/phpvideotoolkit/
http://ffmpeg-php.sourceforge.net/