mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 21:05:10 +00:00
deploy: b5cc7ebec2
This commit is contained in:
anatolykopyl
32
assets/guide_video-as-screen.md.8e8290b1.js
Normal file
32
assets/guide_video-as-screen.md.8e8290b1.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import{M as p}from"./chunks/Mockup.5c49fc9b.js";import{r as o,o as l,c as t,a as s,g as c,i as r,u as i,f as D,d as y}from"./app.06d4fed4.js";var F="/vue-three-d-mockup/assets/screen.273a9703.mp4";const d=s("h1",{id:"video-as-screen",tabindex:"-1"},[D("Video as screen "),s("a",{class:"header-anchor",href:"#video-as-screen","aria-hidden":"true"},"#")],-1),C=["src"],A=y(`<p>The <code>screen</code> prop accepts a <code>video</code> element.</p><p>The <code>screen</code> prop is unreactive, so when using it as a video it's important to only render the <code>Mockup</code> element when the video is loaded. Check out the code example to see how to do this.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The video will not be visible on the model if it is set to <code>display: none</code> or <code>visibility: hidden</code>. Use <code>opacity: 0; pointer-events: none;</code> on the <code><video></code> element for best browser compatability.</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The video may not be autoplaying if the original <code><video></code> element is scrolled off screen. Some browsers check for viewport intersection so it may be best to set the video position to <code>fixed</code>.</p></div><h2 id="code-example" tabindex="-1">Code example <a class="header-anchor" href="#code-example" aria-hidden="true">#</a></h2><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> </span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">videoElement</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">video</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">screenVideo</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">videoElement</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">canplay</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;"> = </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">muted</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">autoplay</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">loop</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> position: fixed;</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> top: 0;</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> left: 0;</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> opacity: 0;</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> pointer-events: none;</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> ></</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ref</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenVideo </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./assets/screen.mp4</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1676666925000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
|
||||
Reference in New Issue
Block a user