html <video> doesn't play sound on some videos - javascript

I don't understand, I have a project with Angular2 and in my home component, I try to display a video with html5. The problem is that sometimes, on some videos, the tag doesn't play sound:
<div class="video-gallery">
<video id="video" controls preload="auto" width="640" height="420" poster="assets/imgs/video_logo.png" >
<source src="assets/videos/{{videos[0].name + videos[0].extension}}" type="video/mp4" />
</video>
</div>
When I say 'on some videos' I mean it's not up to the extension, some videos are mp4 and play sound and others (mp4) don't. Same thing for mkv for example. I only get the video but no sound. What could be the problem ? I work with Chrome's last version so I don't think it's from chrome because it is supposed to support video and sound of html5 . Can it be from the video tag ?
Thanks

Related

Win 7 + IE 11 First video plays but second and later videos won't play

I've a list of video's in a page. The videos are fetched from Server via Rest API and are used in html as below. The first video plays well but later video's wont play. The resolution are same for all video. This works well in other browsers and platform.
<video width="645" height="425" id="myvideo" class ='video' controls controlsList="nodownload">
<source id="source" src="" type="video/mp4">
</video>
In my source tag, I've mentioned type="video/mp4"
In JS Side I do the below
$("#source")[0].src = <path-to-the-video>;
This works great on all browers and platform except for windows 7 and ie 11.
The error I get is
MEDIA12899: AUDIO/VIDEO: Unknown MIME type.
I've checked over the net
to add the type="video/mp4" which is already there and does not solve the problem.
The video resolutions are correct because the same video works in the same IE and Window when played in a separate HTML file.
What am I missing?
Error Screen Shot
Same Video working in same browser when added to a html file
<video width="645" height="425" class="video" id="myvideo" style="display: inline-block;" controls="" controlslist="nodownload">
<source id="source" src="http://hostname.com1/video2" type="video/mp4">
</video>
Screenshot

video is not playing on chrome but playing in other browsers

I'm developing a site in which I want to play video in background. Following is my code, video is playing in Internet explorer but not in Chrome. I'm using 2.2.4 version of jquery and I cannot change it because my all site is developed and If I change jquery than my whole site stops working.
<video id="vid" width="110%" height="100%" autoplay controls loop muted="muted">
<source src="../img/led.mp4" type="video/mp4" />
</video>
Thanx in advance.

Playing videos one after another in html5 video player

I want to play a video after another video so I use this code
<video id="example_video_1" autoplay controls="none" width="640" height="300" poster="vlcsnap-2015-01-10-20h41m11s114.png" onended="run()">
<source src="intro.mp4" type='video/mp4' />
<source src="intro.webm" type='video/webm' />
<source src="intro.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<script>
videoPlayer = document.getElementById("example_video_1");
function run(){
var nextVideo = "video2.mp4";
videoPlayer.src = nextVideo;
videoPlayer.play=autoplay;
videoPlayer.controls=controls;
};
</script>
This works fine in chrome but when i play this in firefox the 2nd video (video2.mp4) dose not play, as firefox dose not support mp4 format. So is there any process to set the second video in mp4, webm and ogg file format so that most of browsers can play the video.

Your last source <source src="intro.ogv" type='video/ogg' /> Is wrong. You wrote two different formats .ogg is for audio. And you need to establish a folder name that the file is in. With this you need to have the HTML5/CSS3 file right next to the folder in a separate folder. This is the correct code:
<source src="foldername/intro.ogv" type='video/ogv' />
Other than that your code is in great shape.
***I do not know anything about your script because I know nothing about JavaScript, or JQuery. Hopefully this was useful! Sorry :(

HTML5 player wont play video from subdomain on smartphone

What is the problem with video tag and HTML5, i can start videos but seek does not work from subdomain on smartphone, when i try in browser and PS all working fine
This is working fine, and seeking working here, but when i change src for video files to subdomain, video is start but seeking not working
<video id="videoPlayer"
src="1.mp4"
style="width:720px; height:440px;"
controls="controls"
type="video/mp4"
onClick="this.play();">
</video>
EDIT: Its not working from my storage server, where is installed lighttpd... from subdomain where is apache seek working fine

try the following code if it helps:
<video id="video player"
width="720"
height="440" controls>
<source src="1.mp4" type="video/mp4" onClick=this.play()>
</video>
Hope this helps out

Browsing and playing videos in HTML5

To watch videos in an HTML5 web player requires us to add the source of the video in the HTML code like this:
<video id="example" class="video" controls preload="none" width="500" height="300"
poster="abc.jpg" data-setup="{}">
<source src="../87D645D1d01.ogv" type='video/ogg' />
</video>
So is there any way with which we can browse a media file in our local file system irrespective of the OS and then add the pah to the SRC: part of video element like we do it in any desktop based video players and then play it?
Regards.
Anuj.

Categories

Resources