I have a website with Laravel and I want to insert a video (mp4) but the video not working.
place the video in the public directory and in storage / public / video call it with:
<video src="videos/people.mp4" autoplay="" loop=""></video>
Something is missing in your code, change it to:
<video controls width = "500">
<source src = "{{asset ('videos/people.mp4')}}" type="video/mp4"></video>
• If you want an auto-read, add "autoplay muted" :
<video autoplay muted controls width = "500">
<source src = "{{asset ('videos/people.mp4')}}" type="video/mp4"></video>
• And finally, if you want autoplay and repeat, add "loop" :
<video autoplay muted loop controls width = "500">
<source src="{{asset ('videos/people.mp4')}}" type="video/mp4"></video>
Related
I have in my view Video Play normal functioning.
The problem is marked in red:
Where is the blue ball, he does not go and does not return.
Only it is running until the end of the video.
Controller:
public ActionResult Media(int id)
{
string fn = Server.MapPath("~/App_Data/01.mp4");
var memoryStream = new MemoryStream(System.IO.File.ReadAllBytes(fn));
return new FileStreamResult(memoryStream, MimeMapping.GetMimeMapping(System.IO.Path.GetFileName(fn)));
}
View:
<video width="400" controls>
<source src="#Url.Action("Media","Account",new { id = 3 })" type="video/mp4">
</video>
Pause works, moving video time does not work.
What am I doing wrong ?
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");
}
}
);
I am using video tag on my website. It works with every major browser, but I am running into issues with Firefox.
When I tap on the play button video scrolls to the end of video!
In order to start the video I need to rewind video to position other than start and than click on play.
Weird.
I tried to set initial position of video to 1s but it didn't help.
I still need to scroll it manually.
Any help will be appreciated.
Thank you
<video width="80% height="80%" controls id="video1">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.mp4" type="video/mp4">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.ogv" type="video/ogg">
<source src="videos/<cfoutput>#getVideo.URL#</cfoutput>.webmhd.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Javascript:
V I D E O */
function setupVideo(){
if(!myVideo){
console.log("Setting up video");
myVideo=document.getElementById("video1");
timeElapsed = 0;
timer;
myVideo.addEventListener("play",videoStarted,false);
myVideo.addEventListener("pause",videoPaused,false);
myVideo.addEventListener("loadeddata",videoLoaded,false);
console.log(" Video Element is: "+myVideo);
}
else{
console.log("Video Was Already set");
playPause();
}
}
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function videoLoaded(e)
{
console.log(" Video Loaded ");
myVideo.currentTime = 1;
}
function videoStarted(e)
{
console.log("Video Started");
//start the timer
timer = setInterval(videoPlaying,1000);
}
function videoPlaying(){
timeElapsed ++;
console.log("Video Playing "+myVideo.currentTime);
if(Math.ceil(myVideo.currentTime)== 10)
{
console.log(" it reached 10 now display quiz");
playPause();
}
}
function videoPaused(e)
{
clearInterval(timer);
console.log("Pause");
}
Your WebM or OGV video may have negative or invalid timestamps. Some software produces video that starts at a time slightly less than zero, particularly if the audio and video frames are not aligned to start at the same time. (That is, the video may start slightly before 0 and the audio may start at 0.)
If the video is produced with ffmpeg, try using the option -avoid_negative_ts 1.
If you have the mkvtoolnix package installed you can view the timestamps in a webm file with the command mkvinfo -s file.webm.
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 }]);
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.
:)