@ericchen1990/pano-view 3.4.0 → 3.4.2

package/README.md

@@ -581,10 +581,12 @@ export function VideoExample() {
 ```
 
 `muted` defaults to `true` so `autoPlay` has a chance under browser autoplay
-rules. `playsInline` also defaults to true and writes both `playsinline` and
-`webkit-playsinline`, keeping the default 360-video path inline on iPhone
-instead of entering the native player. Unmuted playback still needs a user
-gesture; `onPlaybackStateChange` receives `"blocked"` when `play()` is
+rules. `playsInline` also defaults to true and writes `playsinline`,
+`webkit-playsinline`, and the X5 `h5-page` attributes, so the video stays in
+the page on iPhone Safari and in WeChat, QQ, and UC. Picture-in-picture and
+remote playback stay disabled so the element can keep feeding the sphere
+texture. The element is mounted inside the viewer at 1×1px. Unmuted playback
+still needs a user gesture; `onPlaybackStateChange` receives `"blocked"` when `play()` is
 rejected. Remote videos and VTT files that are not same-origin should set
 `crossOrigin` (usually `"anonymous"`). For mobile delivery, provide an H.264 +
 AAC MP4 fallback, poster, CORS, and Range support.
@@ -1641,7 +1643,9 @@ handler, `onEnded`, or playback error.
 `VideoHotspot` uses an `HTMLVideoElement` and `VideoTexture`. Its `playing`
 prop is likewise controlled: toggle it from your click handler or application
 state. On source change or unmount, the element is paused and its texture is
-released. `playsInline` defaults to `true`, `muted` to `true`, `loop` to
+released. `playsInline` defaults to `true` and uses the same inline-playback
+attributes as `PanoVideo`. The element is mounted inside the viewer, hidden,
+so mobile browsers keep it in the page. `muted` defaults to `true`, `loop` to
 `false`, and `preload` to `"metadata"`.
 
 ```tsx

package/README.zh-CN.md

@@ -538,7 +538,7 @@ export function VideoExample() {
 }
 ```
 
-`muted` 默认为 `true`，以便在浏览器自动播放规则下有机会自动播放；`playsInline` 也默认开启，并同时写入 `playsinline` / `webkit-playsinline`，避免 iPhone 将默认的 360 视频提取为原生全屏播放器。非静音播放仍需要用户手势；`play()` 被拒绝时 `onPlaybackStateChange` 会收到 `"blocked"`。非同源的远程视频与 VTT 文件应设置 `crossOrigin`（通常为 `"anonymous"`）。移动端请提供 H.264 + AAC 的 MP4 备选源、poster、CORS 与 Range 支持。
+`muted` 默认为 `true`，以便在浏览器自动播放规则下有机会自动播放。`playsInline` 也默认开启，并写入 `playsinline`、`webkit-playsinline` 以及 X5 的 `h5-page` 属性，让视频在 iPhone Safari、微信、QQ 和 UC 中留在页面内。画中画和远程播放保持关闭，以便该元素持续作为球面纹理。元素会以 1×1 像素挂在查看器内。非静音播放仍需要用户手势；`play()` 被拒绝时 `onPlaybackStateChange` 会收到 `"blocked"`。非同源的远程视频与 VTT 文件应设置 `crossOrigin`（通常为 `"anonymous"`）。移动端请提供 H.264 + AAC 的 MP4 备选源、poster、CORS 与 Range 支持。
 
 ## Tile
 
@@ -1374,7 +1374,7 @@ import { SequenceHotspot } from "@ericchen1990/pano-view";
 
 ## VideoHotspot
 
-`VideoHotspot` 使用 `HTMLVideoElement` 与 `VideoTexture`。其 `playing` prop 同样受控：在点击处理或应用状态中切换。源变更或卸载时元素暂停并释放纹理。`playsInline` 默认 `true`，`muted` 默认 `true`，`loop` 默认 `false`，`preload` 默认 `"metadata"`。
+`VideoHotspot` 使用 `HTMLVideoElement` 与 `VideoTexture`。其 `playing` prop 同样受控：在点击处理或应用状态中切换。源变更或卸载时元素暂停并释放纹理。`playsInline` 默认 `true`，并使用与 `PanoVideo` 相同的内联播放属性。元素会隐藏挂在查看器内，以便移动端浏览器把它留在页面中。`muted` 默认 `true`，`loop` 默认 `false`，`preload` 默认 `"metadata"`。
 
 ```tsx
 import { VideoHotspot } from "@ericchen1990/pano-view";

package/dist/index.cjs

@@ -3446,7 +3446,9 @@ function KeyboardControls({
       return;
     }
     const previousTabIndex = element.getAttribute("tabindex");
+    const previousOutline = element.style.outline;
     element.tabIndex = 0;
+    element.style.outline = "none";
     const syncKeyboardActive = () => {
       let continuous = false;
       for (const action of pressedRef.current) {
@@ -3530,6 +3532,7 @@ function KeyboardControls({
       } else {
         element.setAttribute("tabindex", previousTabIndex);
       }
+      element.style.outline = previousOutline;
       clearPressed();
     };
   }, [controlsRef, enabled, gl, keyMap]);
@@ -9093,6 +9096,56 @@ function useWebVRPointerLock(enabled, element) {
 // src/webvr/wakelock.ts
 var import_react33 = require("react");
 
+// src/video/inline-playback.ts
+var INLINE_VIDEO_ATTRIBUTES = [
+  ["playsinline", "true"],
+  ["webkit-playsinline", "true"],
+  ["x5-playsinline", "true"],
+  ["x5-video-player-type", "h5-page"],
+  ["x5-video-player-fullscreen", "false"]
+];
+function applyInlineVideoPlayback(video, inline) {
+  video.controls = false;
+  video.playsInline = inline;
+  video.disablePictureInPicture = true;
+  video.disableRemotePlayback = true;
+  video.setAttribute("disablepictureinpicture", "");
+  video.setAttribute("disableremoteplayback", "");
+  video.setAttribute("x-webkit-airplay", "deny");
+  video.setAttribute(
+    "controlsList",
+    "nodownload nofullscreen noremoteplayback"
+  );
+  if (inline) {
+    for (const [name, value] of INLINE_VIDEO_ATTRIBUTES) {
+      video.setAttribute(name, value);
+    }
+    return;
+  }
+  for (const [name] of INLINE_VIDEO_ATTRIBUTES) {
+    video.removeAttribute(name);
+  }
+}
+function mountTextureVideo(video, canvas) {
+  const parent = canvas.closest("[data-pano-viewer]") ?? canvas.parentElement;
+  if (!parent) {
+    return;
+  }
+  video.tabIndex = -1;
+  video.setAttribute("aria-hidden", "true");
+  video.setAttribute("data-pano-texture-video", "");
+  video.style.position = "absolute";
+  video.style.top = "0";
+  video.style.left = "0";
+  video.style.width = "1px";
+  video.style.height = "1px";
+  video.style.opacity = "0";
+  video.style.pointerEvents = "none";
+  if (video.parentElement !== parent) {
+    parent.appendChild(video);
+  }
+}
+
 // src/webvr/wakelock-fallback.ts
 var WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64 = "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";
 
@@ -9118,17 +9171,12 @@ function decodeBase64(value) {
 function createFallbackVideo() {
   const video = document.createElement("video");
   video.autoplay = true;
-  video.controls = false;
   video.defaultMuted = true;
   video.loop = true;
   video.muted = true;
-  video.playsInline = true;
   video.tabIndex = -1;
   video.ariaHidden = "true";
-  video.disablePictureInPicture = true;
-  video.setAttribute("playsinline", "");
-  video.setAttribute("webkit-playsinline", "");
-  video.setAttribute("disablepictureinpicture", "");
+  applyInlineVideoPlayback(video, true);
   video.style.cssText = "pointer-events:none;position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;";
   const src = URL.createObjectURL(
     new Blob([decodeBase64(WEBVR_WAKELOCK_FALLBACK_VIDEO_BASE64)], {
@@ -11063,7 +11111,6 @@ function PanoVideo({
   usePanoMediaActivationIntent(autoPlay);
   const gl = (0, import_fiber18.useThree)((state) => state.gl);
   const host = (0, import_react42.useContext)(PanoVideoHostContext);
-  const overlay = (0, import_react42.useContext)(PanoChromeOverlayContext);
   const variants = (0, import_react42.useMemo)(
     () => resolvePanoVideoVariants({ poster, src, variants: variantsProp }),
     [poster, src, variantsProp]
@@ -11141,9 +11188,7 @@ function PanoVideo({
     }
     const video = document.createElement("video");
     video.muted = true;
-    video.playsInline = true;
-    video.setAttribute("playsinline", "true");
-    video.setAttribute("webkit-playsinline", "true");
+    applyInlineVideoPlayback(video, true);
     video.preload = "metadata";
     const texture = new import_three16.VideoTexture(video);
     applyEquirectangularLayout(texture, 1);
@@ -11173,22 +11218,15 @@ function PanoVideo({
     }
     resource.texture.anisotropy = gl.capabilities.getMaxAnisotropy();
   }, [gl, resource]);
-  (0, import_react42.useEffect)(() => {
-    if (!resource || !overlay?.overlayElement) {
+  (0, import_react42.useLayoutEffect)(() => {
+    if (!resource) {
       return;
     }
-    const { video } = resource;
-    video.setAttribute("data-pano-video", "");
-    video.style.position = "absolute";
-    video.style.width = "1px";
-    video.style.height = "1px";
-    video.style.opacity = "0";
-    video.style.pointerEvents = "none";
-    overlay.overlayElement.appendChild(video);
+    mountTextureVideo(resource.video, gl.domElement);
     return () => {
-      video.remove();
+      resource.video.remove();
     };
-  }, [overlay?.overlayElement, resource]);
+  }, [gl, resource]);
   const resolvedVariantId = resolvePanoVideoVariantId(variants, variantId);
   const activeVariant = variants.find((variant) => variant.id === resolvedVariantId) ?? variants[0];
   const mediaKey = activeVariant ? `${activeVariant.id}:${activeVariant.sources.map((source) => source.src).join("|")}:${tracks.map((track) => `${panoVideoTrackId(track)}:${track.src}`).join("|")}:${crossOrigin ?? ""}` : "";
@@ -11478,7 +11516,7 @@ function PanoVideo({
       }
     };
   }, [emitSnapshot, resource]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
@@ -11488,14 +11526,7 @@ function PanoVideo({
     if (mediaCapabilitiesRef.current.volumeAdjustable) {
       video.volume = clampVolume(volume);
     }
-    video.playsInline = playsInline;
-    if (playsInline) {
-      video.setAttribute("playsinline", "true");
-      video.setAttribute("webkit-playsinline", "true");
-    } else {
-      video.removeAttribute("playsinline");
-      video.removeAttribute("webkit-playsinline");
-    }
+    applyInlineVideoPlayback(video, playsInline);
     video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
   (0, import_react42.useEffect)(() => {
@@ -15862,6 +15893,7 @@ function useVideoResource({
   poster,
   src
 }) {
+  const gl = (0, import_fiber29.useThree)((state) => state.gl);
   const [resource, setResource] = (0, import_react57.useState)(null);
   const onEndedRef = (0, import_react57.useRef)(onEnded);
   const onErrorRef = (0, import_react57.useRef)(onError);
@@ -15879,12 +15911,7 @@ function useVideoResource({
     if (crossOrigin !== void 0) {
       video.crossOrigin = crossOrigin;
     }
-    const inline = playsInline ?? true;
-    video.playsInline = inline;
-    if (inline) {
-      video.setAttribute("playsinline", "true");
-      video.setAttribute("webkit-playsinline", "true");
-    }
+    applyInlineVideoPlayback(video, playsInline ?? true);
     video.poster = poster ?? "";
     const texture = new import_three35.VideoTexture(video);
     texture.colorSpace = import_three35.SRGBColorSpace;
@@ -15926,6 +15953,7 @@ function useVideoResource({
     video.addEventListener("error", reportError);
     video.addEventListener("pause", handlePause);
     video.addEventListener("play", handlePlay);
+    mountTextureVideo(video, gl.domElement);
     setResource({ video, texture, ready: false });
     video.src = src;
     video.load();
@@ -15939,9 +15967,19 @@ function useVideoResource({
       video.pause();
       video.removeAttribute("src");
       video.load();
+      video.remove();
       texture.dispose();
     };
-  }, [crossOrigin, id, playsInline, poster, src]);
+  }, [crossOrigin, gl, id, playsInline, poster, src]);
+  (0, import_react57.useLayoutEffect)(() => {
+    if (!resource) {
+      return;
+    }
+    mountTextureVideo(resource.video, gl.domElement);
+    return () => {
+      resource.video.remove();
+    };
+  }, [gl, resource]);
   return resource;
 }
 function VideoHotspot({
@@ -15980,21 +16018,14 @@ function VideoHotspot({
   const onPlaybackStateChangeRef = (0, import_react57.useRef)(onPlaybackStateChange);
   onPlaybackErrorRef.current = onPlaybackError;
   onPlaybackStateChangeRef.current = onPlaybackStateChange;
-  (0, import_react57.useEffect)(() => {
+  (0, import_react57.useLayoutEffect)(() => {
     if (!resource) {
       return;
     }
     resource.video.loop = loop;
     resource.video.muted = muted;
     resource.video.volume = clampVolume2(volume);
-    resource.video.playsInline = playsInline;
-    if (playsInline) {
-      resource.video.setAttribute("playsinline", "true");
-      resource.video.setAttribute("webkit-playsinline", "true");
-    } else {
-      resource.video.removeAttribute("playsinline");
-      resource.video.removeAttribute("webkit-playsinline");
-    }
+    applyInlineVideoPlayback(resource.video, playsInline);
     resource.video.preload = preload;
   }, [loop, muted, playsInline, preload, resource, volume]);
   (0, import_react57.useEffect)(() => {