当前位置: 首页 > 文档资料 > A-Frame 中文文档 >

<a-video>

优质
小牛编辑
121浏览
2023-12-01

The video primitive plays a video as a texture on a flat plane.

Example

<a-scene>  <a-assets>    <video autoplay loop="true" src="penguin-sledding.mp4"></video>  </a-assets>  <!-- Using the asset management system. -->  <a-video src="#penguin-sledding" width="16" height="9" position="0 0 -20"></a-video>  <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->  <a-video src="airbending.mp4"></a-video></a-scene>

Attributes

AttributeComponent MappingDefault Value
colormaterial.color#FFF
heightgeometry.height1.75
metalnessmaterial.metalness0
opacitymaterial.opacity1
repeatmaterial.repeatNone
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight1
segments-widthgeometry.segmentsWidth1
shadermaterial.shaderflat
sidematerial.sidefront
srcmaterial.srcNone
transparentmaterial.transparentfalse
widthgeometry.width3

Caveats

iOS has a lot of restrictions on playing videos in the browser. To play an inline video texture, we must:

  • Set the <meta name="apple-mobile-web-app-capable" content="yes"> meta tag. A-Frame will will inject this if missing.
  • Set the webkit-playsinline and playsinline attribute to the video element. A-Frame will add this to all videos if missing).
  • Pin the webpage to the iOS homescreen.

Inline video support on iOS 10 may change this. On certain Android devices or browsers, we must:

  • Require user interaction to trigger the video (such as a click or tap event). See Chromium Bug 178297.