Add play button to signal playability
This commit is contained in:
parent
4bab75ca5b
commit
2466f12a9f
1 changed files with 26 additions and 1 deletions
|
@ -1597,7 +1597,7 @@ class AnnotationPlayer extends HTMLElement {
|
||||||
|
|
||||||
imgEl.src = url_prefix + this.getAttribute('data-poster-url');
|
imgEl.src = url_prefix + this.getAttribute('data-poster-url');
|
||||||
imgEl.addEventListener('click', () => {
|
imgEl.addEventListener('click', () => {
|
||||||
imgEl.style.display = 'none';
|
imgWrapEl.style.display = 'none';
|
||||||
this.annotator = new Annotator(
|
this.annotator = new Annotator(
|
||||||
playerEl,
|
playerEl,
|
||||||
null, //"tags.json",
|
null, //"tags.json",
|
||||||
|
@ -1614,6 +1614,30 @@ class AnnotationPlayer extends HTMLElement {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.imgWrap{
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
div.imgWrap::before {
|
||||||
|
content: '\u25B6';
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 50px;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 15px);
|
||||||
|
top: calc(50% - 15px);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 47px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
div.imgWrap:hover::before{
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
div.play, div.imgWrap {
|
div.play, div.imgWrap {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: white;
|
background: white;
|
||||||
|
@ -1733,6 +1757,7 @@ class AnnotationPlayer extends HTMLElement {
|
||||||
left: 5%;
|
left: 5%;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
color:white;
|
||||||
}
|
}
|
||||||
svg .background {
|
svg .background {
|
||||||
fill: white
|
fill: white
|
||||||
|
|
Loading…
Reference in a new issue