how to display and play html5 audio in dot php file? - php

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

Related

PHP read MP4 file with another extension

I work in a museum, our website has many .MP4 videos. I changed their extensions to .MUS to make them more difficult to download (most people don't know how to right click the webpage, click the <video> tag to download it and then rename it). Videos show fine. It looks like this :
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='dinos.mus'> ◄█■■■
</video>
Now I moved the videos to a protected directory outside WWW, then I use PHP to read them, like this :
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='open_file.php?file=dinos.mp4'> ◄█■■■
</video>
And this is open_file.php :
header( "Content-Type: video/mp4" );
readfile( "/home/" . $_GET["file"] );
It works fine... until I change the extensions from .MP4 to .MUS, then the videos are no longer shown :
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='open_file.php?file=dinos.mus'> ◄█■■■
</video>
I don't understand why : it's the same file, I send the proper header with PHP, the <video> tag has the proper type. Actually, without PHP the <video> tag works fine with the .MUS files, so the problem seems to be PHP.
My question is : how can I read the .MUS files and send them to be interpreted as MP4?
I have tested your code, the Content-Type: video/mp4 and readfile should work (it should not be related to the file extensions, imagine if you get the file data from a BLOB, it should also work)
But just if the home directory is relative ,then please use "./home/" instead of "/home/"
and
make sure that the directory / file permissions are set properly. Say make sure the home directory is EXECUTABLE (chmod a+x for home directory) and the mus files are READ-PERMITTED (chmod a+r for the MUS files)
So this open_file.php works:
<?php
header("Content-Type: video/mp4");
readfile("./home/" . $_GET["file"]);
?>
See a working example here:
http://www.createchhk.com/SO/testSO20Nov2021b.php
code as follows:
<video width='640px' height='480px' controls='controls' />
<source type='video/mp4' src='open_file.php?file=test2.mus'>
</video>
This wouldn't really protect the file. You could protect the file by hosting it on another server, buffering the video, and then renaming the file for the next user, effectively deleting the file until it gets reloaded. This would take a while to code though.
A different way to do this though, would be to use blob urls. These are what YouTube uses and it stops people from easily finding the video URL.
You can use the PHP code below to do this:
<?php // php at top of page
$video = file_get_contents('./location/to/file/from/page.mp4');
$video_code = base64_encode($video);
?>
Then, where you have the video file, you can do this:
<video width='640px' height='480px' controls='controls' controlslist='nodownload' />
<source type='video/mp4' src='<?php echo $video_code; ?>'>
</video>
If anyone tries to grab the video URL and open it, it will tell them that the file has been moved. They also cannot download the file. I would also recommend adding oncontextmenu='return false;' to the video for a bit more security.
I think the MIME type for .MUS files is application/octet-streamheader( "Content-Type: application/octet-stream" );

How to load one image if sopported or another if not in HTML

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.

Play video through php script inside HTML5 video tag

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,

playing an mp3 file and loading a waveform image?

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

html source path with variable [duplicate]

This question already has answers here:
use both html and php in echo and href line
(3 answers)
Closed 8 years ago.
I write a PHP - HTML project and a have to be able to depict some videos. Thus, I store the same of the video like this:
$myVideoName = "Video1.mp4" //video in local host
and I wrote a simple video script to embed it to a browser:
<div style="text-align:center">
<video id="Video1" width='500' height='500' controls >
<source src='.\MyProject\Video1.mp4' type='video/mp4'>
</video>
</div>
Now I want to embed the variable of the video to the source path code like this:
<source src='.\MyProject\'.$myVideoName type='video/mp4'>
What is the right way to do so?
Assuming the page which contains the video tag is of .php extension, to use variables inside a string, you can do something like this:
<source src=".\MyProject\<?php echo $myVideoName; ?>" type="video/mp4">
You could do it like this.
<?php
echo '<source src="\MyProject\'.$myVideoName.'" type="video/mp4">';
?>
If $myVideoName is not changing say $myVideoName = "Video1.mp4" then you will do like this :
<source src=".\MyProject\<?php echo $myVideoName;?>" type="video/mp4">
if the videos data is in some table then you have to fetch the data from that table to this variable $myVideoName
You have to save this file with extension .php otherwise it won't work

Categories