I'm trying to play multi-drm content (Widewine, Playready) by using dash.js player (version 2.3.0). I gathered as much information as possible, however I'm still not able to play the content. Dash.js player was modified recently and many code examples found on the internet are no longer valid, also the documentation is not updated. This is my current code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="dash.all.debug.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Dash Example App</title>
</head>
<body onload="testVideo()">
<button id="playButton" type="button">Play</button>
<div>
<video id="vid2" data-dashjs-player controls>
</video>
</div>
<script src="main.js"></script>
</body>
</html>
JS:
function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_header = "X-AxDRM-Message";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.attachProtectionData({
"com.widevine.alpha": new dashjs.MediaPlayer.vo.protection.ProtectionData(AXINOM_DEMO_WV_LS, AXINOM_DEMO_header, AXINOM_DEMO_key)
});
document.getElementById("playButton").click(function() {
var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
player.initialize(element, videoUrl, true);
});
};
As a result, I'm getting "Uncaught TypeError: Cannot read property 'protection' of undefined" in the console. I've prepared the protectionData part according to the documentation linked below.
http://vm2.dashif.org/dash.js/docs/jsdocs/MediaPlayer.vo.protection.ProtectionData.html
Is anyone able to provide me with a working example how multi-drm content should be handled in dash.js or explain what should I change in my code?
Thanks in advance.
There is a DRM quick start example on GitHub that uses this exact content with the Axinom DRM license server, mirroring your scenario quite perfectly.
You can also find a live deployment of the example project that you can view in your browser, to quickly see the user viewpoint.
If something remains unclear after reading that guide, please edit your question and I will edit this answer to expand on the missing parts in detail!
The documentation you linked to is for version 1.5.1.
The documentation for v2.3.0 can be found at http://cdn.dashjs.org/v2.3.0/jsdoc/index.html
Updated JS
function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.setProtectionData({
"com.widevine.alpha": {
"serverURL": AXINOM_DEMO_WV_LS,
"httpRequestHeaders": {
"X-AxDRM-Message": AXINOM_DEMO_key
};
};
});
document.getElementById("playButton").click(function() {
var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
player.initialize(element, videoUrl, true);
});
};
Related
Is there a way to use javascript to modify a script element?
Like for example:
HTML:
<script id="something" src="/js/file.js"></script>
Javascript:
var something = document.getElementById("something");
something.src = "/js/anotherfile.js"
Is it possible? Because I have a bit of code that works like that and it sort of doesn't work
To be specific, here's the code:
<!DOCTYPE html>
<html>
<head>
<title>MyohTheGod's Website</title>
<link rel="icon" type="image/x-icon" href="/supercorn.gif" defer>
</link>
<link id="css" href="/css/dark.css" rel="stylesheet" type="text/css">
</link>
<script src="/js/particles.js" defer></script>
<script src="/js/header.js"></script>
<script src="/js/theme.js"></script>
<script>window.alert("Welcome to the Home of MyohTheGod. You can play games, check out our web proxies, and more. Also, please do check out the About page. Press OK to continue...");</script>
</head>
<body>
-snip-
</body>
<script id="foot" src="/js/footer.js"></script>
</html>
<script>
-snip-
</script>
var css = document.getElementById("css");
var foot = document.getElementById("foot");
function toggleDLmode(m) {
-snip-
if (dlmodebool) {
css.href = "/css/dark.css"
foot.src="/js/dark-footer.js"
} else {
css.href = "/css/index.css"
foot.src="/js/footer.js"
}
}
-snip-
It is working, do you inspect it? It does changed, but maybe you're thinking, "hm why this /js/anotherfile.js is not downloaded?". Well because of the script tag is already rendered and already downloaded, so you can't do that. What you can do though add NEW script tag.
Maybe this will help How to dynamically change the script src?. This links would explain more why your code "does not work".
There certainly is. You can use document.scripts which returns an collection that you can iterate through like an array. You can change the code using the innerHTML property very much like a normal element. See here https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
Edited to add: If you've got a html page with multiple script tags, the document.script collection has each script in the order they appear. The code below will log out the source (src tag) or the actual javascript for each script element.
You can also 'write' javascript by setting the innerHTML property.
IMHO it's a bit of a solution that's looking for a problem but at least it gives you access to the number of scripts you have.
[...document.scripts].forEach(script => {
if (script.src != '') {
console.log("Script source:" + script.src);
} else {
console.log(script.innerHTML);
}
});
I am trying to make a music player that works with SoundCloud. So I have buttons like play, next, prev. and I made functions like:
function playIt(){
SC.stream("/tracks/293", function(sound){
sound.play();
});
}
So it plays song when the button is player:
<button onclick="playIt()">Play</button>
But it does not work. Any idea?
Here is the demo
1º - Put the JS files in the head. Use the "External Resources" on JSfiddle.
2º - Put var sound = [...] before the SC.steam.
Is that.
Demo: http://jsfiddle.net/don/zcN7G/3/
According to #lago above, let me deliver a full short code, so you can do your own labs ;-)
<!DOCTYPE html>
<html>
<head>
<script src=http://connect.soundcloud.com/sdk.js></script>
<script>
SC.initialize({client_id:'your client_id goes here'});
function p()
{
SC.stream
(
'/tracks/293',
function(s)
{
s.play()
}
)
}
</script>
</head>
<body>
<button onclick=p()>play</button>
</body>
</html>
API guide here
I'm trying to implement the features from this site. But my code isn't alerting anything when I click on the x-foo element. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
</head>
<body>
<script type="text/javascript">
var xFoo = document.createElement('x-foo');
var xFoo = new XFoo();
document.body.appendChild(xFoo);
xFoo.onclick=function(){alert("It works!")};
</script>
<x-foo>
Test
</x-foo>
</body>
</html>
Any suggestions? (I'm on Chrome)
It looks like you're trying to create a Custom Element but you haven't registered it yet. To create your own XFoo element would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Custom Element</title>
</head>
<body>
<!-- Create a template for the content inside your element -->
<template>
<h1>Hello from XFoo</h1>
</template>
<!-- Register your new element -->
<script>
var tmpl = document.querySelector('template');
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
};
var XFoo = document.registerElement('x-foo', {
prototype: XFooProto
});
</script>
<!-- Use the element you've just registered as a tag -->
<x-foo></x-foo>
<!-- OR, create an instance using JavaScript -->
<script>
var el = document.createElement('x-foo');
document.body.appendChild(el);
</script>
</body>
</html>
Unfortunately this approach depends on native APIs which currently only ship in Chrome 34. As someone else mentioned, a much easier approach to creating your own custom element would be to use Polymer. Polymer is a library that adds support for Web Components (essentially what you're trying to build) to all modern browsers. That includes IE 10+, Safari 6+, Mobile Safari, current Chrome and current Firefox.
I've put together a jsbin which shows how to create your own x-foo element using Polymer.
You should try viewing the following article:
http://www.polymer-project.org/
It's an open source Github project. I actually tried that article, but don't recommend it. Instead, use the link given above. It uses Ajax and JSON.
I followed a simple tutorial from here. Which basically has the following code
<!doctype html>
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
Everything works fine without any problems. But when I removed <base href="..."> and substituted all links with this base url ( http://chessboardjs.com/css/chessboard.css ). I got the same animation but now with a terrible blinking effect.
This blinking effect does not appear in IE 11.0.1, Firefox 25.0.1, but appears in Chrome 31.0.1650.57 m
I do not understand what is the reason (in my opinion nothing should change).
P.S. after some time I thought that the reason is due to the Chrome's warning while using jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead., but when I was able to get rid of it, the problem was still there. So I am completely puzzled.
I am the creator of chessboard.js
This is likely related to Issue 52
Check that whatever webserver is serving the image files for the chess pieces is setting an appropriate expires header for them; it should be returning an HTTP 304 Not Modified after an image file has already been requested.
What is probably happening is the web server is re-serving the image files on every board update and causing the "flicker" effect.
I might change how this functions in future versions, but for now that should probably do the trick.
Really getting in to javascript and looking around at some patterns. One I have come accross is the module pattern. Its seems like a nice way to think of chucks of functionality so I went ahead and tried to implement it with jQuery. I ran in to a snag though. Consider the following code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var TestClass2 = (function(){
var someDiv;
return {
thisTest: function ()
{
someDiv = document.createElement("div");
$(someDiv).append("#index");
$(someDiv).html("hello");
$(someDiv).addClass("test_class");
}
}
})();
TestClass2.thisTest();
});
</script>
</head>
<body id="index" onload="">
<div id="name">
this is content
</div>
</body>
</html>
The above code alerts the html content of the div and then adds a class. These both use jQuery methods. The problem is that the .html() method works fine however i can not add the class. No errors result and the class does not get added. What is happening here? Why is the class not getting added to the div?
Ah, now that you've updated your question I can better answer your question. You should change the append to appendTo considering you're wanting to move the newly created element inside of the already present #index.
$(document).ready(function() {
var TestClass2 = (function() {
var someDiv = $("#name");
return {
thisTest: function() {
someDiv = document.createElement("div");
$(someDiv)
.html("hello")
.addClass("test_class")
.appendTo("#index");
}
}
})();
TestClass2.thisTest();
});
Hope this helps!
I copied and pasted your code and it works for me.
Make sure you're not simply viewing source to see if the class is applied because doing so simply shows you the HTML that was sent from the server - any DOM updates that occur through JavaScript will not be reflected.
To view the live DOM, use a tool like Firebug or WebKit's Inspector (comes built-in to Safari and Chrome).
Your code works great!
http://jsfiddle.net/lmcculley/p3fDX/