asciinema-player
asciinema-player copied to clipboard
asciinema
Possibility to change src programatically
A workaround is to use the CreatePlayer function, which will blow away the identified element, but you don't get an asciinema-player element with its attendant event support, etc.
I tried reaching around and setting .player on the element directly, and re-loading the script after adding a suitably-configured player element to the DOM, but those didn't pan out.
For my purposes, using innerHTML to create a new asciinema-player ended up working just fine, e.g.
enclosingElement.innerHTML = "<asciinema-player src='...'/>";
Setting src on an existing element, nor using document.createElement works because of when custom elements are initialized (I thought they weren't init'd until they were added to the DOM), and because asciinema picks up the src attribute in the creation callback, not e.g. when the user first hits play.
It would be possible to support changing the source via player.src = "http://...." by extending element.js (and some additions to core.cljs).
There are some other properties that are related to src:
-
start-at -
loop -
preload -
autoplay -
speed
Should they (all, or some?) be reset to default values when setting new src? For example, when start-at=10 was initially set on the element and you change src, should the new recording also start from 10s? Similarly, should the new recording be automatically preloaded? Should it also auto-play and loop like the initial one (if these were set initially)?
start-at is recording specific so it should be reset to 0 imo. speed is not directly recording-specific, but different speeds may feel good for different recordings. Others could inherit their value but if someone is driving the player via JavaScript anyway then they can just player.play() instead of relying on autoplay attr. (note that there is difference between "attributes" and "properties" in HTML tags/elements, which makes things even more complicated but I'm not going to cover that, yet 😄 )
Directly setting .src sounds like it ergonomically complicated. Maybe offer a method that accepts a full configuration object, so that users have access to / are responsible for everything re: programmatic changes?
We can have something like player.reinitialize(url, { loop: true, ... }), yeah. This would be much simpler to implement.
Although I must say I like the idea of changing .src alone, because it makes the player element behave closer to <img>, <video> etc (you can change src on <img> and the browser fetches and re-renders the image). Interactive player like asciinema's is way different beast than <img> but HTML5's <video> is closer (not sure how it deals with loop/autoplay in such case, worth checking it out).
@sickill if you change a video src and you have loop and autoplay enabled the video player will load the new media file, start playing when it has enough buffer and loop it when it reaches to the end.
One thing that you must take into account is that if you change the src attribute of a video player you must call videoPlayer.load() or the attribute will be updated but the media file not loaded, so maybe you might want to implement the same behavior.
<html>
<head>
<link rel="stylesheet" type="text/css" href="asciinema-player.css"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function change() {
$('#player').html('<asciinema-player id="player" theme="solarized-dark" src="./demo2.cast"></asciinema-player>')
}
</script>
</head>
<body>
<asciinema-player id="player" theme="solarized-dark" src="./demo.cast"></asciinema-player>
<script src="asciinema-player.js"></script>
<button onclick="change()">确定</button>
</body>
</html>
If you cannot replace the attribute（src）, replace the entire HTML
I would call the above a "nuclear option" ;) But it's so simple, and it works, that I just love it 👍