Embed: added button for html5 picture-in-picture-mode
This commit is contained in:
Cat
Thulinma
parent
564de0ef12
commit
72ce091f67
4 changed files with 141 additions and 1 deletions
88
embed/imgs/pip.svg
Normal file
88
embed/imgs/pip.svg
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg3937"
|
||||
height="45"
|
||||
width="45"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="pip.svg"
|
||||
viewBox="0 0 45 45"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<sodipodi:namedview
|
||||
pagecolor="#8bff39"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="1"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="2510"
|
||||
inkscape:window-height="1405"
|
||||
id="namedview3591"
|
||||
showgrid="false"
|
||||
showguides="true"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-paths="false"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:snap-bbox-edge-midpoints="true"
|
||||
inkscape:snap-bbox-midpoints="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:snap-object-midpoints="true"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:snap-intersection-paths="true"
|
||||
inkscape:object-nodes="true"
|
||||
inkscape:snap-smooth-nodes="true"
|
||||
inkscape:snap-midpoints="true"
|
||||
inkscape:zoom="20.977778"
|
||||
inkscape:cx="30.43697"
|
||||
inkscape:cy="22.213983"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg3937"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
scale-x="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#8bff39" />
|
||||
<defs
|
||||
id="defs3939" />
|
||||
<metadata
|
||||
id="metadata3942">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<rect
|
||||
style="fill:none;stroke:#ffffff;stroke-width:2.50001;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
|
||||
id="rect340"
|
||||
width="34.499989"
|
||||
height="19.49999"
|
||||
x="5.2500048"
|
||||
y="12.250005"
|
||||
ry="2" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:0.503374;stroke:#ffffff;stroke-width:1.9854;stroke-dasharray:none;stroke-opacity:1;stop-color:#000000"
|
||||
id="rect948"
|
||||
width="17.014597"
|
||||
height="8.0146017"
|
||||
x="19.992701"
|
||||
y="20.992701"
|
||||
ry="1.9999996"
|
||||
rx="2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
5
embed/imgs/pip_plain.svg
Normal file
5
embed/imgs/pip_plain.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="45" height="45" version="1.1" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rect x="5.25" y="12.25" width="34.5" height="19.5" ry="2" style="fill:none;stroke-width:2.5;stroke:#fff"/>
|
||||
<rect x="20" y="21" width="17" height="8" rx="2" ry="2" style="fill-opacity:.5;fill:#fff;stroke-width:2;stroke:#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 515 B |
File diff suppressed because one or more lines are too long
|
|
@ -139,6 +139,9 @@ MistSkins["default"] = {
|
|||
{
|
||||
type: "fullscreen",
|
||||
classes: ["mistvideo-pointer"]
|
||||
},{
|
||||
type: "picture-in-picture",
|
||||
classes: ["mistvideo-pointer"]
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
|
@ -208,6 +211,10 @@ MistSkins["default"] = {
|
|||
{
|
||||
type: "fullscreen",
|
||||
classes: ["mistvideo-pointer"]
|
||||
},
|
||||
{
|
||||
type: "picture-in-picture",
|
||||
classes: ["mistvideo-pointer"]
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
|
@ -280,6 +287,10 @@ MistSkins["default"] = {
|
|||
size: 45,
|
||||
svg: '<path d="m2.5 10.928v8.5898l4.9023-2.8008 9.6172 5.7832-9.6172 5.7832-4.9023-2.8008v8.5898h15.031l-4.9004-2.8008 9.8691-5.6387 9.8691 5.6387-4.9004 2.8008h15.031v-8.5898l-4.9023 2.8008-9.6172-5.7832 9.6172-5.7832 4.9023 2.8008v-8.5898h-15.033l4.9023 2.8008-9.8691 5.6387-9.8691-5.6387 4.9023-2.8008z" class="fill">'
|
||||
},
|
||||
pip: {
|
||||
size: 45,
|
||||
svg: '<rect x="5.25" y="12.25" width="34.5" height="19.5" ry="2" class="stroke semiFill toggle"/><rect x="20" y="21" width="17" height="8" rx="2" ry="2" class="semiFill toggle stroke"/>'
|
||||
},
|
||||
loop: {
|
||||
size: 45,
|
||||
svg: '<path d="M 21.279283,3.749797 A 18.750203,18.750203 0 0 0 8.0304417,9.2511582 L 12.740779,13.961496 A 12.083464,12.083464 0 0 1 21.279283,10.416536 12.083464,12.083464 0 0 1 33.362748,22.5 12.083464,12.083464 0 0 1 21.279283,34.583464 12.083464,12.083464 0 0 1 12.740779,31.038504 l 3.063185,-3.063185 H 4.9705135 V 38.80877 L 8.0304417,35.748842 A 18.750203,18.750203 0 0 0 21.279283,41.250203 18.750203,18.750203 0 0 0 40.029486,22.5 18.750203,18.750203 0 0 0 21.279283,3.749797 Z" class="stroke semiFill toggle" />'
|
||||
|
|
@ -1470,6 +1481,42 @@ MistSkins["default"] = {
|
|||
|
||||
return button;
|
||||
},
|
||||
"picture-in-picture": function(){
|
||||
if ((!("setSize" in this.player)) || (!this.info.hasVideo) || (this.source.type.split("/")[1] == "audio") || (!document.pictureInPictureEnabled)) { return; }
|
||||
|
||||
var MistVideo = this;
|
||||
if (!("requestPictureInPicture" in MistVideo.video)) { return; }
|
||||
|
||||
var button = this.skin.icons.build("pip");
|
||||
button.set = function(){
|
||||
if (document.pictureInPictureElement) {
|
||||
MistUtil.class.remove(this,"off");
|
||||
}
|
||||
else {
|
||||
MistUtil.class.add(this,"off");
|
||||
}
|
||||
};
|
||||
MistUtil.event.addListener(button,"click",function(){
|
||||
var promise;
|
||||
if (document.pictureInPictureElement) {
|
||||
promise = document.exitPictureInPicture();
|
||||
}
|
||||
else {
|
||||
promise = MistVideo.video.requestPictureInPicture();
|
||||
}
|
||||
if (promise) {
|
||||
promise.then(function(){
|
||||
button.set();
|
||||
});
|
||||
}
|
||||
else {
|
||||
button.set();
|
||||
}
|
||||
});
|
||||
button.set();
|
||||
|
||||
return button;
|
||||
},
|
||||
tracks: function(){
|
||||
|
||||
if ((!this.info) || (!this.video)) { return; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue