Video background doesn't work (html, css, js) - javascript

i'm working on a code that create a video background in loop.
Unfortunately the code doesn't work if I change the video source, because I copied the code from a tutorial online: http://codepen.io/bldng/pen/biGJx
I need help to solve the problem.
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>videosfondo</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<video class="video" autoplay loop>
<source src="video/video.webm" type="video/webm">
</video>
<div class="text">prova</div>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
</body>
</html>

I checked the link of codepen given by you in Chrome, FF and IE. Its working fine in Chrome but in IE and FF its not working. Below are some of the link/suggestions you can try which might work for you.
VIDEO FILES MUST BE SERVED WITH THE PROPER MIME TYPE!
Check THIS LINK for the source.

Related

VideoJS skin not showing on Firefox or Chrome

I am trying to implement a videojs player on a basic web page with the Sublime skin.
I have added the source links from the videojs website, copied the html and css from the codepen above however the default player is loading and not the skin. The web page also never stops loading, I have to hit the x button on the browser.
The console is fine and there are no errors.
I think I am missing something but I don't know what! Any help appreciated. I don't have a live version of this web page but if it helps I can put it online. Thanks!
From the Sublime Codepen:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="assets/css/video-feature.css">
<link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-sublime-skin" width="640px" height="267px"
controls preload="none" poster='https://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</body>

Ie9 Html5 audio tag in jbosserver

I am using audio tag in html5 page. It is working fine in all the browsers except Ie9.
The code is :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Add a title</title>
</head>
<body>
<audio controls="controls" src="audio-file.mp3" autoplay>
audio tag not supported.
</audio>
</body>
</html>
If i open directly the html page it is working fine, but same page is failed to load when trying to open in server(jbosserver).
Regards
Chandrasekhar M

HSL with videoJS not working on IE9

I have a m3u8 stream provided by Plex Media Server, and when i look on chrome or FF it works great, but when going to the page on IE9 it says:
The video could not be loaded, either because the server or network failed or because the format is not supported.
this is the code I used:
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'>
<source src="http://ip:port/video/:/transcode/universal/start?path=http%3A%2F%2Fip%3Aport%2Flibrary%2Fmetadata%2F1&fastSeek=1&X-Plex-Platform=Internet+Explorer&offset=0" type='video/mp4' />
<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>
</body>
</html>
I tried adding the following plugin: https://github.com/videojs/videojs-contrib-hls
but no luck there.
Anybody got any clue what I might be doing wrong?
From the readme, videojs-contrib-hls does not support Internet Explorer < 10 unfortunately. I don't have the exact details, but it's because the tech requires more advanced and better performing javascript than is available on IE9.
btw, in your code the mime type is 'video/mp4'.

MP4 in HTML5 Video Tag Not Playing in Internet Explorer

Can anybody tell me why this is working for Firefox and Chrome, but not for IE9, 10, or 11? It's giving me the typical black screen with a small white square containing a red X.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Player Test</title>
</head>
<body>
<video style="position:fixed; top:0px; left:0px; height:100%; width:100%;" autoplay controls>
<source src="./videos/video.mp4" type="video/mp4">
<source src="./videos/video.ogg" type="video/ogg">
</video>
</body>
</html>
Things I have already tried:
- Adding the MIME type to .htaccess
- Re-encoding to make sure the MP4 are properly H264.
- video.js didn't help at all.
I have also tried just using 'File' > 'Open' and opened the MP4 locally on my machine using IE, and it plays just fine like that, so I think the video should be properly encoded and everything for IE.
For IE9 use meta tag something like
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

Embed youtube video in canvas using mediaelement.js

I'm trying to embed youtube video in canvas using mediaelement.js according to this page. However, video is not loading, the control player is all black. Can anybody give me some hints? Here is my code, mostly follow the page (added html5=true to ensure html5 player from youtube):
EDIT: checked the demos under the github repo. Youtube demo is the only one that doesn't work. Guess it's an issue in this lib. However, any workaround would still be appreciated. The reason I want to do this is to feed the youtube stream to a html5 canvas.
<!DOCTYPE html>
<html>
<head>
<title>youtube in canvas</title>
<script src="jquery.js"></script>
<script src="mediaelement-and-player.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
</head>
<body>
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI&html5=true" />
</video>
<script>
jQuery(document).ready(function($) {
$('#player1').mediaelementplayer();
});
</script>
</body>
</html>

Categories