I'm having a bit of an issue with video js on ie8. I have a list a videos. When a user clicks on one of the links, I do a javascript call to get the proper video and video urls(all absolute urls). the video slated to work when the page loads works fine but if I try to switch to another video, the video player disappears and the script console shows a string "LOG:Error" over and over again...basically crashing ie8.
Here's the code I use to load a video:
data = $.parseJSON(data);
mp4_url = data.mp4_url;
webm_url = data.webm_url;
flv_url = data.flv_url;
var submission_id = data.submission_id;
var video_player = '<video id="video" class="video-js vjs-default-skin" controls preload="none" width="'+player_width+'" height="'+player_height+'" poster="" data-setup="{}"> '
+ '<source id="mp4" src="'+mp4_url+'" type="video/mp4" />'
+ '<source id="flash" src="'+flv_url+'" type="video/flv" />'
+ '<source id="webm" src="'+webm_url+'" type="video/webm" />'
+ '</video>';
$('#player').empty();
$('#player').html(video_player);
$('#player').fadeIn('slow');
The issue here is not following the API documents. I realized what I needed to do what put the video block into my template and then define a variable set to the player like so:
var mplayer = _V_('video');
and then set the sources:
mplayer.src([{ type: "video/mp4", src: mp4_url },{ type: "video/webm", src: webm_url },{ type: "video/flv", src: flv_url }]);
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 converted all my images to WebP using gulp-webpand I'm using Modernizr to check if webp is enabled and if so, create a new img tag with the webp url. It's working as intended on desktop as far as I can see on Google Page Speed, but on mobile, it says Serve images in next-gen formats still.
Is there another step you have to take for it to work on mobile devices? I can't find anything about it anywhere and I've set up webp exactly as Modernizr says.
Any help would be appreciated.
Modernizr.on('webp', function (result) {
$('.noscript').each(function() {
let img = document.createElement('img');
img.alt = this.getAttribute('data-alt');
img.className = this.getAttribute('data-class');
if (result) {
img.src = this.getAttribute('data-webp');
} else {
img.src = this.getAttribute('data-original');
}
this.parentNode.insertBefore(img, this.nextSibling);
});
});
Then I'd do this in the HTML:
<noscript data-alt="Payment Logos" data-original="/images/common/payment-foot.png" data-webp="/dist/images/common/payment-foot.webp" data-class="mobileHide lazyload" class="noscript">
<img src="/images/common/payment-foot.png" alt="" class="mobileHide">
</noscript>
I´m having a huge problem with the video.js and mp4 (h.264) video viewing in a lightbox (fancy box) on Firefox 22 on the Mac OS X, 10.7.5.
Here’s the test page: http://ranova.thull-hosting.de
Click on the play button in the middle where it says “WILLKOMMEN BEI RANOVA”.
All other browsers work like a charm but FF gives the error: “no video with supported format and MIME Type Found”, Firebug states: “The given ’type-Attribute’ ’video/mp4’ is not supported. Loading media resource http://video-js.zencoder.com/oceans-clip.mp4 failed. ”
Here’s the code:
<script>
$(document).ready(function() {
$('#startplayer').fancybox(
{content : '<video class="video-js vjs-default-skin" controls preload="none" width="555" height="311" poster="http://ranova.thull-hosting.de/fileadmin/videos/interview1_neu_vorschau.jpg" data-setup="{}"><source src="http://video-js.zencoder.com/oceans-clip.mp4" type=\'video/mp4\'></source></video>'
}
);
});
// $("#startplayer").fancybox({'padding':0,'margin':0,'width':640,'height':360,helpers:{title:{type:'inside'},overlay:{css:{'background':'rgba(0,0,0,0.5)'}}},'type':'swf','swf':{'wmode':'transparent','allowfullscreen':true}});
Can anyone help please?
Cheers
andi
Video.js isn't being used on that page, so you just have a plain video element and Firefox can't play the file. By using video.js its Flash fallback will play the MP4 on Firefox.
Include the video.js javascript and css on the page
<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>
As the video element didn't exist when the document was ready, use Fancybox's onComplete option to create the video.js player. Note I've given the video element an id to reference it.
$('#startplayer').fancybox(
{content : '<video id="my_video" class="video-js vjs-default-skin" controls preload="none" width="555" height="311" poster="http://ranova.thull-hosting.de/fileadmin/videos/interview1_neu_vorschau.jpg"><source src="http://video-js.zencoder.com/oceans-clip.mp4" type=\'video/mp4\'></source></video>',
onComplete: function() {
videojs("my_video");
}
}
);
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.
:)
I'm sure you've all seen this demo of image replacement using this :
$("#largeImg").attr({ src: largePath, alt: largeAlt });
http://www.webdesignerwall.com/demo/jquery/img-replacement.html
So, imagine that I want to change 4 images on the screen to simulate that I am changing the entire 'page' , but avoiding using AJAX / PHP or any image preloaders. The problem I am having right now with my code :
<script>
$(document).ready(function(){
$(".navlink").click(function(){
var theirname = $(this).attr("name");
var imagepath = "images/img_"+theirname+".jpg";
var headerpath ="images/header_"+theirname+".png";
var textpath = "images/about_"+theirname+".jpg";
//var lightpath = "images/smallimg_"+theirname+".jpg";
$("#primeheader").attr({ src: headerpath});
$("#primetext").attr({ src: textpath});
$("#primephoto").attr({ src: imagepath});
});
});
</script>
is that when you call a 'fade-in', 'animate opacity' or anything like that, the switch of the image source using .attr({src : whatever}) always makes it visible first , even after making the .css visisbility none / invisible.
I have already tried delaying, setTimeout , etc (I tried to research as much as I can to avoid duplicate posts)
Hope that makes sense, sorry if it's too wordy / unclear
Feedback is appreciated! Thanks!
What happens if you wrap all of the elements with a container, then fade the container out/in during the image transition.
$('#primeContainer').fadeOut('fast', function() {
$('#primeheader').attr({ src: headerpath });
$('#primetext').attr({ src: textpath });
$('#primephoto').attr({ src: imagepath });
$(this).fadeIn('fast');
});