I am getting an problem when loading a URL in HTML5 Player.
When I am playing the video using the physical path of the video like http://localhost/udemy/assets/images/videos/V20200724142619.mp4 it is working fine.
But when I am trying to load the video using the function like
http://localhost/udemy/web/fetch_video/7
The video is loading and playing perfect but seeking is not working
my php code is
function fetch_video($video)
{
$modify=$this->data->get_modify_data('chapter','id',$video);
$file = $modify['video'];
$ext=explode('.',$file);
$type=$ext[count($ext)-1];
$file_size = filesize($file);
$file_pointer = fopen($file, "rb");
$data = fread($file_pointer, $file_size);
header("Content-type: video/$type");
echo $data;
}
Related
I stored the video link in the database and stored the video in the public folder. a folder description is something like public/uploads/100/abcd.mp4.
I am reading this video from a Laravel method and receiving this video from Vuejs and trying to show the video in the <video> tag. I also tried to show the video using the direct link, something like <source src="/uploads/100/abcd.mp4">.
But this way I can only show the video but the video progress bar is not working and currentTime cannot be set this way because I tried to set it.
Maybe I need to receive the video in Vuejs using a different way. Please give me a solution to this. I am adding the Laravel method and Vuejs method here, which way i tried to receive the video, I don't know if it is the correct way to receive the video. Please give me the solution if you have any.
the video-tag
```
<video>
<source v-bind:src="axiosGetIntroVideo">
</video>
```
Laravel method from where I am getting the video path and reading the video and returning the video.
$data = Usercvvideos::select('id','userid','name','cv_video','upload_file_type')->where('userid', $id)->where('upload_file_type', $request->gettingFileType)->get();
$source_file = public_path()."/".$data[0]->cv_video;
$filesize = (string)(filesize($source_file));
$fileName = explode("/".$data[0]->userid."/", $data[0]->cv_video);
$originalFileName = $fileName[1];
header('Content-Type: video/mp4');
header('Content-Length: ' . $filesize);
header('Content-Disposition: attachment; filename="' . $originalFileName . '"');
header('Accept-Ranges: bytes');
return readfile($source_file);
Vuejs method from where I called the Laravel method written here and trying to receive the video and trying to show the video in <video> tag
async getIntroData(){
var gettingFileTypeByString={
'gettingFileType': 'introVideo'
};
let returnValue;
try{
await axios.put('url' + this.userId, gettingFileTypeByString
,{
responseType: "arraybuffer",
headers: {
"Accept": "video/mp4",
},
}
).then((response) => {
console.log(response);
returnValue = response.data;
});
let buffer = returnValue;
let videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' });
// let videoBlob = new Blob([new Uint8Array(buffer)]);
let url = window.URL.createObjectURL(videoBlob);
this.axiosGetIntroVideo = url;
}
catch(e){
console.log(e);
}
}
This way in Vuejs I tried to get the video but it is not working. please help me to get the video. I am stuck.
You should just record to db url where you uploaded file. Then just set that string to src of video. Also you'll need control attribute in video tag.
I have integrated Intervention Image library (v-2.5) into my laravel application (v-5.1) to resize images. It is working fine in local server, but when i deploy it to live server i'm getting this error: Unsupported image type. GD driver is only able to decode JPG, PNG, GIF or WebP files.
. My image size is 18kb and its mime type is jpg. So there is nothing wrong with my image. Here is my code that i'm using for convertion and saving to server:
foreach ($request->images as $file) {
// getting file name with extension
$imageName = getFileName($file);
$homeworkImage = new HomeworkImage();
$homeworkImage->tbl_homework_id = $homework->homework_id;
$homeworkImage->image_name = $imageName;
if ($homeworkImage->save()) {
// $file->move('uploads/homework', $imageName);
$image_resize = Image::make($file->getRealPath());
$image_resize->resize(300, 300);
$image_resize->save('uploads/homework/' . $imageName);
}
}
If i try to upload the image normally, that it is working fine. Can anyone point me out if i'm missing something!
Hello im uploading from input form a data:image, its works well with png and jpg
but i cant get work it with GIF.
<input value="data:image/gif;base64,...................................." type="hidden" />
What i need:
Create a file from a string with out losing animation. (the other problem)
Copy to a folder
The problem
Whatever gif im trying to upload i get a error from if (!$image) that image is not valid. Why ?
If i remove $image = #imagecreatefromgif($image); All works but image copied is only first frame from the gif, so its not animated (i heard GD have problems with it, maybe i can just copy full image from datestring, but how to save it right ? )
Im tried to use Gifencoder and Gifdecoder and imagemagick but the problem its doesn't recognize a image from datastring , i need to blob it ?
Here is my code
function ImageUploadString($data_string)
{
$data_string = str_replace('data:image/gif;base64,', '', $data_string);
$data_string = base64_decode($data_string); // decode image from base64
$image = imagecreatefromstring($data_string);
if ($image !== false) {
$random_imagename = str_shuffle(MD5(microtime()));
$extention = "gif";
$ufname = 'folder/'.$random_imagename.'.'.$extention;
$image = #imagecreatefromgif($image); /* Attempt to open */
if (!$image) {
imagedestroy($image);
die('gif error');
}
imagegif($image, $ufname);
}
}
$imagebase = "data:image/gif;base64,..........................................";
ImageUploadString($imagebase);
I want to show animated gif images for product .
Uploading gif image is posible but the same is not seen on frontend.
I saw the functionality due to cache in magento animated gif images is not seen.
How can I implement it ?
Check this link for reference.
Thanks in Advance.
You can implement it .
Though your caching functionality will not work for animated gif image.
copy file from
path : app/code/core/Mage/Catalog/Model/Product/Image.php
to
path : app/code/local/Mage/Catalog/Model/Product/Image.php
(create folders if necessary)Find the line public function getUrl() and replace the function with:
public function getUrl()
{
$baseDir = Mage::getBaseDir('media');
$file = ('gif' == strtolower(pathinfo($this->_baseFile, PATHINFO_EXTENSION))) ? $this->_baseFile : $this->_newFile;
$path = str_replace($baseDir . DS, "", $file);
return Mage::getBaseUrl('media') . str_replace(DS, '/', $path);
}
Hope this will help you.
Does anyone have a URL of a successful multivideo gallery using mediaelement.js where the same instance of MediaElementPlayer is reused and have it working with the Flash fallback for IE8 & 7?
I have partial success changing the setSrc as a function after the new MediaElementPlayer is created for the first time. This is robust for the HTML5 component but failing for the flash fallback. setSrc is consoling as not available in IE8 & 7. It fails to recognise the object.
Moving the setSrc to the "success" part of the new MediaElementPlayer does load the Flash fallback and HTML5 video as expected. On attempting to change the source of the player I have attempted to "destroy" and recreate the MediaElementPlayer object on the fly without success. I have not declared player using var=player so reasonably have expected to delete it but without success:
player = false;
delete player;
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', {
pluginPath: ''+basePath+'_Includes/JS/',
success: function (player, node) {
//set the size (for flash otherwise no video just sound!)
if($("#rg-gallery.smallGallery").length > 0){
player.setVideoSize(400, 225);
} else{
player.setVideoSize(640, 360);
}
player.setSrc([
{ src: mp4, type: 'video/mp4' },
{ src: webm, type: 'video/webm' }
]);
player.load();
player.pause();
//if the video plays stop the slideshow
player.addEventListener('play', function () {
videoPlaying.push('playing');
stopSlideshow();
}, false);
}
});
Research both here and on the web shows that others are attempting to try this type of dynamic gallery but I am unable to find an example that shows it as technically viable.
Any example URLs where someone's cracked it would be lovely. Thanks :)
Solved.
Created a JS variable of video code:
var playerView = '<video width="640" height="360" id="videoPlayer" class="video-js vjs-default-skin" poster="" controls preload="auto"><source id="mp4" type="video/mp4" src="" /><source id="webm" type="video/webm" src="" /></video>';
On initialization removed any DOM rendering of any existing player, set it to false and deleted it:
//remove any existing video player
$(".mejs-container").remove();
player = false;
delete player;
Appended new video view to DOM:
//add a new one
$(".rg-video").append(playerView);
Created new instance of player and set src and load as normal:
//make a new instance of the mediaelement video player
player = new MediaElementPlayer('#videoPlayer', { ...
HTML5 video and Flash video fallback for IE8 & 7 now working as part of dynamic mixed media gallery.
Off for tea and medals.
:)