HTML5 VIDEO Element

More
10 months 2 days ago - 10 months 2 days ago #84845 by iamrobert
1) I used the file field
2) I also enabled mp4 in FLEXIContent
3) In my item.php template I used this code:


Code:
use Joomla\CMS\Factory; $db = Factory::getDbo(); $user = Factory::getUser(); //VIDEO FIELD ID $download_id = 174; if (isset($item->fieldvalues[$download_id])) {   $downvals = $item->fieldvalues[$download_id]; } if (!empty($downvals)) {   $query = 'SELECT * FROM #__flexicontent_files WHERE id IN ("'     . implode('", "', $downvals)     . '")';   $db->setQuery($query);   $file_data = $db->loadObjectList('id');   //echo "<pre>" . print_r($file_data, true) . "</pre>";   foreach ($file_data as $file_id => $d) {     // Construct the download link with the filename as part of the path     $dl_link = 'index.php?option=com_flexicontent&task=download&id=' . $d->id       . '&cid=' . $item->id . '&fid=' . $download_id . '/' . urlencode($d->filename);     $dl_link = JRoute::_($dl_link); // Ensure that the URL is routed correctly     echo $dl_link;     // Output the video tag with the constructed URL     echo '<video controls id="myVideo">';     echo '    <source src="' . $dl_link . '" type="video/mp4">';     echo '    Your browser does not support the video tag.';     echo '</video>'; } }
 
Last edit: 10 months 2 days ago by iamrobert.

Please Log in or Create an account to join the conversation.

More
10 months 2 days ago #84846 by iamrobert
Replied by iamrobert on topic HTML5 VIDEO Element
Version 2 allows you to get height and width so you can load lazily.

I needed to upload and install getID3  - I couldn't find a way to handle video width and height in Joomla!

​​​​​​​I used my template folder.


Code:
require_once('templates/iamrobert4/libraries/getid3/getid3.php'); $getID3 = new getID3; use Joomla\CMS\Factory; use Joomla\CMS\Router\Route; $db = Factory::getDbo(); $user = Factory::getUser(); $download_id = 174; if (isset($item->fieldvalues[$download_id])) {   $downvals = $item->fieldvalues[$download_id]; } if (!empty($downvals)) {   $query = 'SELECT * FROM #__flexicontent_files WHERE id IN ("' . implode('", "', $downvals) . '")';   $db->setQuery($query);   $file_data = $db->loadObjectList('id');   foreach ($file_data as $file_id => $d) {     // Construct the file path     $file_path = JPATH_ROOT . '/components/com_flexicontent/medias/' . $d->filename;     // Check if the file exists and is readable     if (file_exists($file_path) && is_readable($file_path)) {       // Analyze the file to get its properties, including dimensions       $file_info = $getID3->analyze($file_path);       $width = isset($file_info['video']['resolution_x']) ? $file_info['video']['resolution_x'] : 'auto';       $height = isset($file_info['video']['resolution_y']) ? $file_info['video']['resolution_y'] : 'auto';       continue;     }     // Construct the download link with the filename as part of the path     $dl_link = 'index.php?option=com_flexicontent&task=download&id=' . $d->id       . '&cid=' . $item->id . '&fid=' . $download_id . '/' . urlencode($d->filename);     $dl_link = Route::_($dl_link); // Use Joomla's routing function     // Output the video tag with the constructed URL and the dimensions     echo '<video width="' . $width . '" height="' . $height . '" loading="lazy" controls>';     echo '    <source src="' . $dl_link . '" type="video/mp4">';     echo '    Your browser does not support the video tag.';     echo '</video>';   } }

Please Log in or Create an account to join the conversation.

More
10 months 2 days ago #84847 by micker
Replied by micker on topic HTML5 VIDEO Element
hello i think the best way can be to add local video mode and a video playlist script to allow html5 video and playlist system.
like this : github.com/videojs/video.js
or hlsjs.video-dev.org/demo/ plyr.io/
www.mediaelementjs.com/

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.330 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline