<a-video>
优质
小牛编辑
112浏览
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
| Attribute | Component Mapping | Default Value |
|---|---|---|
| color | material.color | #FFF |
| height | geometry.height | 1.75 |
| metalness | material.metalness | 0 |
| opacity | material.opacity | 1 |
| repeat | material.repeat | None |
| roughness | material.roughness | 0.5 |
| segments-height | geometry.segmentsHeight | 1 |
| segments-width | geometry.segmentsWidth | 1 |
| shader | material.shader | flat |
| side | material.side | front |
| src | material.src | None |
| transparent | material.transparent | false |
| width | geometry.width | 3 |
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-playsinlineandplaysinlineattribute 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.