The content of my site is loaded through a PHP include, based of off the options a user selects from the menu at the top of the page-- the menu option reloads the index.php page and points it to the content to include.
This works fine for just about anything, except on pages that have embedded video via the HTML <video> tag. On those pages, the embedded video still appears to be clickable (i.e., clicking on parts of it will take me to the YouTube page hosting the video) but I can't actually see the video or video player.
Is this something to do with using a PHP include, or is there something else I'm missing? I'd been previously using iframes for my site content, but wanted to get away from that as much as possible.
EDIT: To clarify, this is the behavior I'm seeing when I load the page:
The video is definitely there; I can save it, and if I right click on it, I get the context menu for the video player. I just can't actually see the video. This is the block on the index.php file that actually loads the page content:
<div id="frame">
<?php
$url = '';
if (!empty($_GET['menu'])) {
$url .= $_GET['menu'] . '/';
}
if (!empty($_GET['customer'])) {
$url .= $_GET['customer'] . '/';
}
if (!empty($_GET['product'])) {
$url .= $_GET['product'] . '/index.';
}
if (!empty($_GET['pagetype'])) {
$url .= $_GET['pagetype'];
}
if (empty($url)) {
$url = 'intro.html';
}
include $url;
?>
</div>
All of the $GET values are supplied by the link the user selects from the main menu, like so:
<li><a class="mainMenuLink" href="index.php?menu=products&customer=customer2&product=product5&pagetype=html">Example</a></li>
EDIT 2: Here's the HTML markup generated by the page for the section surrounding the videos:
<div id="tabs-5"><!-- start tab 5-->
<p>Access videos detailing operations and maintenance.</p>
<div class="accordion">
<h3>Video 1</h3>
<div>
<video src="./products/coffee/sinf/video/video1.mp4" controls></video>
</div>
<h3>Video 2</h3>
<div>
<video src="./products/coffee/sinf/video/video2.mp4" controls></video>
</div>
</div>
</div><!-- end tab 5-->
If you check your console log, and don't see an error for a 404 Not Found, then you are likely not doing anything wrong on the PHP end.
It looks like you are using Chrome, so Inspect Element should let you know if there is any issue loading your include and it not calling the right file path to your video or something.
This could be browser dependent, and it is also recommended (the last I checked) to include multiple file types for HTML5 videos to be cross browser compatible.
This has almost always worked for me -
<video preload="auto" autoplay="" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogv">
</video>
Adding these lines to your .htaccess file will help, too -
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogv .ogv
VLC has a great open-source player that can convert to the additional file types - http://www.videolan.org/vlc/index.html
Related
I'm creating a portfolio website for my music and want to allow users to play my songs without them being able to see the source/download the mp3 files.
I'm using PHP for this project and loading the files via HTTP headers.
<?php
$mp3 ='72vox.mp3';
if(file_exists($mp3)) {
header('Content-Type: audio/mpeg');
header('Content-Disposition: inline; filename="mp3_file.mp3"');
header('Content-length: '. filesize($mp3));
header('Cache-Control: no-cache');
header('Content-Transfer-Encoding: chunked');
readfile($mp3);
exit;
}
?>
When the page loads, my mp3 plays. However, I can't seem to figure out how to display any HTML on the page (and more importantly, how to place the audio controls in a div).
Thank you for any help in advance
I'm creating a portfolio website for my music and want to allow users to play my songs without them being able to see the source/download the mp3 files.
That's impossible.
In this case, the URL of your PHP script is effectively the URL of the audio file.
When the page loads, my mp3 plays. However, I can't seem to figure out how to display any HTML on the page (and more importantly, how to place the audio controls in a div).
That has nothing to do with the way you serve the file. You need to make a page with an <audio> tag, or with appropriate JavaScript. When you go to this URL, it's not a "page" from your server, it's just the browser's default handling of your MP3 file. Other browsers will just download it or open it up in the user's default audio player.
"However, I can't seem to figure out how to display any HTML on the page (and more importantly, how to place the audio controls in a div)."
As an example...
Save your PHP code in a file called getFile.php.
Now create an HTML page with code like below, and use the PHP file as source in an <audio tag>. You can extend the HTML with your own "other stuff" code.
<!DOCTYPE html>
<html>
<body>
<div id="div_myAudio">
<audio id="myAudio" controls>
<source crossorigin="anonymous" src="getFile.php" type="audio/mpeg">
</audio>
</div>
<div id="div_myOtherStuff">
My "Other Stuff" (HTML code) goes here or anywhere inside this document "body" tag...
</div>
</body>
</html>
<div class="grid-5-12">
<iframe width="200" height="120" src="http://www.saweb.info/videos/nightclub.mp4" frameborder="0"></iframe>
</div>
I copied above direct from an "admin page" from Firefox developer page source and it works as standalone, but on the admin page itself it doesn't appear (it always did)
It also doesn't show even without the div. (It's in a parsley form and the iframe show the "current selected video")
Tested in Chrome and it also doesn't display while I can't find any similar error on the internet.
Anyone perhaps has an idea why the iframe don't appear / disappeared please?
is not used for play videos but to display another page. Some browsers might support this way of importing a video. But correct way to use tag like this for your video link.
<video width="200" height="120" controls>
<source src="http://www.saweb.info/videos/nightclub.mp4" type="video/mp4">
</video>
I have something like this on page load:
echo "<td class='audio'><audio controls><source src></audio></td>";
I then make an ajax call based on click to pull relative audio URL's from an API I'm working with to be used as the src.
Upon visiting one of those audio URL's in a separate tab, the audio does in fact play. My thinking is that it's not playing where I need it to because it doesn't get a source until it needs it (used ajax to cut down on load time due to rather large API calls).
Any thoughts?
Your source tag is missing the filetype information. Even is src is replaced by src="your_path/your_file.mp3", it also needs for example type="audio/mpeg" for an mp3-file. The full generated HTML code would have to be something like
<audio controls>
<source src="your_path/your_file.mp3" type="audio/mpeg">
</audio>
This is work me,or may be you can remove the <source src=""> tag and add src="" inside of the <audio> tag
https://shty.ml?j2n7MxkhKm
When you enter this link then click the Preview button
full screen button in video tag missing when page containing video is loaded externally on another pages div
I have a page external.php . In this page when i use the following code
echo
'<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>';
i get a video with full screen button in it on chrome.But when i try to load this external.php on another page (home.php) div the video is coming but the full screen button is missing.But in IE there is no such problem.
You can either solve this via CSS OR Fullscreen API.
1. CSS
I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure. The following solution is webkit specific.
You need just to write this code in your css:
video::-webkit-media-controls-fullscreen-button {}
2. Full screen API
If you want to accomplish it by Fullscreen API check below demo first:
Demo Full screen video
As you can see a very simple demo showing HTML5 video in full screen, make sure you're using Chrome dev, webkit or firefox nightly.
For more detail you can check it here.
Browsers may provide a user interface, but shouldn't provide a programmable one.
I have two files, one with HTML code when I've diferent photo albums links, example:
<a href="albumprueba.php"><img class="fancyboxi"
src="Libro Fez/Libro Fez - 001.jpg" alt="image19"
width="91%" height="56" /></a>
And another file (is php) I've a routine that scans all the photos in a folder, and shows photos:
<a class="fancyboxi" data-fancybox-group="gallery" title="Laurea"
href="Libro Fez/<?php echo $archivos[$imagen_a_empezar]?>"><img
src="Libro Fez/<?php echo $archivos[$imagen_a_empezar]?>" alt="" width="19%"/></a>
I would like to open the HTML file from an album and open a fancybox with all the photos that showing the routine in PHP file.
I've tried to do in the HTML file this, but doesn't works:
<img src="Libro Fez/Libro Fez - 001.jpg" alt="image19" width="91%" height="56" />
Any idea? thank.
Your href is certainly malformed.
albumprueba.php?Libro Fez/Libro Fez - 001.jpg
That isn't an address as URLs cannot have spaces (go to it manually and check what the address is in the navigation bar in your browser). Moreover it's just landing on a jpeg - are you sure you want this link to be to a single image?
Other than that the anchor should work. Are you getting a 404 error after following the link? If you want the other html file to be perptually viewable from the parent page you should consider using an iframe.