Menu
I am completely new in MPEG-DASH Adaptive Streaming . I am trying to create a Video player with dash.js in browser . I have referenced some of the useful MPEG-DASH Adaptive Streaming documents . Those links are
https://learn.microsoft.com/en-us/azure/media-services/media-services-embed-mpeg-dash-in-html5#creating-the-html-page
https://github.com/Dash-Industry-Forum/dash.js
With the above documents , i have created a sample HTML file .
<!DOCTYPE html>
<html>
<head>
<title>Adaptive Streaming in HTML5</title>
<style>
video {
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<div>
<h1>Adaptive Streaming with HTML5</h1>
<video id="videoplayer" controls></video>
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- DASH-AVC/265 reference implementation -->
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script>
<!--setup the video element and attach it to the Dash player-->
(function(){
var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);
})();
</script>
</body>
</html>
But after running on chrome (Version 63.0.3239.132 (Official Build) (64-bit)) and mozilla (version 57.0 (64-bit)) , I couldn't see any video playing in this player . This is the output screenshot
I am trying to run locally on my browser . Will it make any problem ? After clicking play button , i couldn't see any video on that . In Mozilla browser i can see following
[dash.js 2.6.4] MediaPlayer has been initialized
The character encoding of the HTML document was not declared.
The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or in the transfer protocol.
But the script https://cdn.dashjs.org/latest/dash.all.min.js is working fine too . Also when i add https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd URL in https://reference.dashif.org/dash.js/1.4.0/samples/dash-if-reference-player/index.html video player , it is working fine .
Actually what is i am missing here ? Any suggestions or help ?
363
Attribute values are case-sensitive in HTML documents.
So, this would work if you change the <video> element to:
<video id="videoPlayer" controls></video>
HLS is automatically supported by HTML5, but MPEG-DASH is not. This means that some browsers or apps cannot play MPEG-DASH video streams, even on non-Apple devices.
Read HLS vs Dash in this link
35
answered Sep 14 '25 00:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
