I have a problem that IE11 isn't playing my html5 video tag video. I've tried other browsers like Chrome/Firefox and there it works perfectly fine. IE11 doesn't even give me an error in the console why it isn't playing the video and shows me white background. I tried different formats like .m4v and mp4. The video is in h264 encoding and web optimized(I'm using software named "Handbrake" to encode the video"), the resolution is 1920x1088. I also tried to put "" in my website head.
My HTML code
<video autoplay loop muted id="player">
</video>
<img id="backfill-image" src="<?php bloginfo('template_url'); ?>/img/backgroundimage.jpg">
</div>
My JavaScript
let myPlayer;
let backfill;
window.addEventListener('DOMContentLoaded', (event) => {
myPlayer = document.getElementById("player");
backfill = document.getElementById("backfill-image");
myPlayer.onerror = function() {
console.error(myPlayer.error);
showPlaceholderImage();
};
// Example invalid source to throw an error
myPlayer.src = ""+templateUrl+"/img/myvideo.m4v";
// Example valid source that doesn't throw an error
// myPlayer.src = "https://www.w3schools.com/tags/movie.mp4";
function showPlaceholderImage() {
myPlayer.style.display = "none";
backfill.style.display = "block";
}
});
I tried to make a test with the MP4 format H264 encoder video.
It looks like it is working fine on the IE 11 browser.
Here is a test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
<video width="400" autoplay>
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</body>
</html>
Here, you can see that I have verified that the video has an H264 encoder using a VLC player.
Output in the IE 11 browser:
Video downloaded from this site
Related
I need to show multiple instances of a video tag on one page. I'm trying to find a way to read video buffers and use MediaStream to append the buffers to another video tag. But it seems there is no such an api in video tag.
Is there any way to do this? please let me know if you know any solutions.
NOTE: I don't want to use canvas to put image data on it because of performance issues in safari.
"I need to show multiple instances of a video tag on one page...
But it seems there is no such an api in video tag."
You can try using the CaptureStream API (intro). You can also check options in the documentation.
CaptureStream should not care if your video input is a media file or some appended buffers.
Note: In these stream copies...
autoplay is needed for auto-displaying pixels,
muted avoids hearing multiple audios.
This code is tested as working in Chrome (Windows), so let's hope it works in Safari (Apple) too:
<!DOCTYPE html>
<html>
<body>
<video id="vid_01" width="320" height="240" controls>
<source src="myfile.mp4" type="video/mp4">
</video>
<video id="vid_02" width="320" height="240" muted autoplay>
</video>
<video id="vid_03" width="320" height="240" muted autoplay>
</video>
<script>
var streamCopy;
var vid1 = document.getElementById('vid_01');
var vid2 = document.getElementById('vid_02');
var vid3 = document.getElementById('vid_03');
//# check if video is ready to be copied...
vid1.addEventListener("loadeddata", copyVidStream );
function copyVidStream ()
{
if (vid1.readyState >= 3 ) //if ready then copy stream
{
streamCopy = vid1.captureStream();
vid2.srcObject = streamCopy;
vid3.srcObject = streamCopy;
}
}
</script>
</body>
</html>
I'm trying to play live tv channel with videojs. I've tried various ways but always get "No compatible source was found for this media." error. Other videos are playing fine.
The url plays fine in VLC and the codec shows the stream as "MPEG-H Part2/HEVC (H.265) (hevc)".
I've tried across a range of browsers too, chrome, firefox, safari and edge.
This is the bones of the code. Is there a way to play it ?
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<video id='live-video' class='video-js vjs-default-skin' controls>
</video>
<script>
var player = videojs('live-video');
player.src({ src:'https://www.example.com/play.php?OTUxE2NDUN', type:'application/x-mpegurl'});
player.play();
</script>
I've concluded there is nothing wrong with the coding you show in your base posting (question). I speculate that the ACTUAL source URL you were using is NOT a valid HLS stream, and hence the cause of your stated error.
(It's possible that it is a valid DASH stream, but I'm reasonably certain
your code would NOT work with a DASH stream.)
Here's is some working code that is equivalent to yours, except that it
uses the newer (recommended) UI / API, mentioned in the Video.js live tutorial.
The key to WHY the code below works is simply that it DOES reference a valid HLS stream...(a URL that I stumbled upon, on the Internet).
<!DOCTYPE html>
<html>
<head>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<!-- [ Note: HLS code is "built-in" to video.js, as of version 4.x, so we should NOT include (possibly older?) HLS support separately ] -->
<!-- script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script -->
<!-- script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script -->
</head>
<video id='live-video' class='video-js vjs-default-skin vjs-live vjs-liveui' width='640' height='360' controls muted>
</video>
<script>
// The extra 'liveui' arg below, and two extra classnames are not REQUIRED, but documentation-tutorial
// refers to it as the newer/preferred API See: https://docs.videojs.com/tutorial-live.html
var player = videojs('live-video', {liveui: true} );
player.src({ src:'https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8', type:'application/x-mpegurl'});
// Note: We begin with the stream playing, but the audio is initially 'muted' (see that attribute in video tag above )
// See: https://stackoverflow.com/questions/70719678/html5-video-autoplay-with-sound-unmuted
player.play();
/* Note: Their "playlist.m3u8" file in their URL contains these lines (this info helps us understand the goal of their HLS)
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=2130537,RESOLUTION=1920x1080,CODECS="avc1.4d4028,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_1080p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1292733,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_720p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=557217,RESOLUTION=640x360,CODECS="avc1.77.30,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_360p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=418515,RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_240p/chunks.m3u8
*/
</script>
</body>
</html
Here is a simpler method of playing streaming video in your webpage. You can customize it to your liking by adding parameters and code from the video.js website guide.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>UN Web TV</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js
</script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
<source src="https://cdnapi.kaltura.com/p/2503451/sp/250345100/playManifest/entryId/1_gb6tjmle/protocol/https/format/applehttp/a.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I wrote a page , and found addEventListener("loadedmetadata",fun) doesn't run correctly on firefox
I'm trying fixing a bug of a old software .While loading video and page, the software try to draw some player-controller on the page .It worked well on Chrome and IE , but fail to draw some player-controller on Firefox .I tried debuging days until I found problem can simplify like this :
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
vid.addEventListener("loadedmetadata", getmetadata);
function getmetadata()
{
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
I expected firefox(41.0.1) to alert twice with ("The vid") and ("Meta data for video loaded") , but it didn't.
These code run correctly on chrome 45 and IE11 .Both of these browers alert twice with ("The vid") and ("Meta data for video loaded") as I expected .
Is it a bug of firefox ? How can I avoid this problem ?
I just tired vid.addEventListener("canplay", getmetadata); and got the same result .
It seems the problem is about 'addEventListener'
The video was loaded . I can use vid.play to play it . I also used console.log(vid) to see if the DOM was right , and it was .
It seems addEventListener skip watching "loadedmetadata" and "canplay" , and I don't know why .
I just tried .oncanplay and .onloadedmetadata ,and found it was not the addEventListener ,but the Event caused this problem .
While something (e.g. alert()) disturbed the loading , Firefox couldn't get the Event . So if the video came out to be 'On Loadedmetadata' or 'On Canplay' in the moment , firefox didn't catch up it . After that , the video is loadedmetadata or canplay .It's the attributes , not the event .Firefox misses the event , and rushes forward .
Finally I use console.log(vid.readyState) and found a solution .
While loading a page , firefox is so fast that it rush in a hurry while chrome and ie are waiting for something .
At the moment vid.addEventListener("loadedmetadata", getmetadata) , vid.readyState come out to be more than 2 in firefox , while on chrome and ie , vid.readyState is still 0.
readyState 0 means 'No information is available about the media resource' .
readyState 2 means 'Data is available for the current playback position, but not enough to actually play more than one frame' , the same like 'loadedmetadata'.It's not an event , but a property.
I changed the code like this to check if the brower rushed too fast to miss the event 'loadedmetadata'.
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
vid.addEventListener("loadedmetadata", getmetadata);
if (vid.readyState >= 2) {
getmetadata();
}
function getmetadata()
{
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
For more informaion about readyState : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
I faced the same problem and got a solution. I used loadeddata event instead of loadedmetadata event and it worked for me.
In the Definitive Guide Javascript book it says loadeddata event means:
Data for the current playback position has loaded for the first time,
and readyState has changed to HAVE_CURRENT_DATA.
And HAVE_CURRENT_DATA means:
Media data for currentTime has been loaded, but not enough data has
been loaded to allow the media to play. For video, this typically
means that the current frame has loaded, but the next one has not.
This state occurs at the end of a sound or movie. It has readyState
property of value "2".
I hope my answer makes it clear:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
alert("The vid");
// here I used "loadeddata" event and worked very well♥
vid.addEventListener("loadeddata", getmetadata);
function getmetadata() {
alert("Meta data for video loaded");
}
</script>
<p>test</p>
</body>
</html>
I am making a html webpage which needs to run ONLY LOCALLY(Offline Website). Using "input file tag", user selects and gives the video file path that needs to be played. For the video player I am using the Video tag of html.
I tried doing this with the below code but the video is not playing.
Please help me.
Note: It is an OFFLINE website.
CODE:
<html>
<head>
<script>
function func() {
var videolink = document.getElementById('fileID');
var player = document.getElementById('videoID');
var mp4Vid = document.getElementById('sourceID');
$(mp4Vid).attr('src',videolink);
player.load();
player.play();
}
</script>
</head>
<body>
<input type="file" id="fileID" />
<input type="button" onClick="func();"/>
<center>
<video id="videoID" width="320" height="240" controls autoplay>
<source id="sourceID" type="video/mp4">
</video>
</center>
</body>
</html>
try change this:
$(mp4Vid).attr('src',videolink);
on that:
$(mp4Vid).attr('src', '' + videolink).appendTo($('#sourceID'));
You cannot with JavaScript alone, except on modern browsers.
The Issue
It's a Web browser security feature to obsure the full path of file uploads. If you attempt to read the value of a file upload field, you'll receive something like this:
$('input[type="file"]').val(); // "C:\fakepath\some_file.mp4"
Even if in this hypothetical the file exists on my desktop (e.g., ~/Desktop/some_file.mp4).
The Workaround
On modern browsers, see "In HTML5 how to show preview of image before upload?" for using FileReader on the file input and using its source. Otherwise, you can likely do so using Adobe Flash, where installed.