问题描述
我正在做一些A帧项目，但是videosphere不会自动播放其源代码.我从Cinema4d渲染了一个球形视频并注入了元数据，我可以看到源已加载，但未播放.
I'm working on some A-frame project, but videosphere is not autoplaying its source. I rendered a sphere video from cinema4d and injected metadata, and I can see the source is loaded, but it is not played.
我本来想在本地播放60MB的视频，但是即使我将视频切成小于1MB的视频，它仍然无法正常工作，因此我认为这与大小无关.
I originally wanted to play 60MB video locally, but even when I cut the video into less than 1MB, it is still not working so I don't think it's not about the size.
我同时尝试了有声视频和无声视频，但都无法正常工作.
I tried both a video with a sound, and without a sound, and both are not working.
我还尝试了在其他人的项目中工作过的项目.
I also tried which worked in other person's project.
如果您也可以查看视频，这里是视频的链接！
Here's the link for the video in case if you can check the video too!
https://drive.google.com/open?id=1F3VLYFTSnnlmRY1-xYxOe2SEWjZDwI9q https://drive.google.com/open?id=1kshs3IqJD0nMi0-fGLibnMDg9wc9lrxx
<!DOCTYPE html>
<html>
<head>
<title>Palm to Room</title>
<link rel="stylesheet" href="style.css" />
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video
id="BankVideo"
autoplay
loop="true"
preload="auto" crossorigin="anonymous"
src="src/sample-ij.mp4"
>
</video>
</a-assets>
<a-videosphere
id="EnvBank"
rotation="0 180 0"
src="#BankVideo">
</a-videosphere>
<!-- Define camera with zero user height, movement disabled and arrow key rotation added. -->
<a-camera
user-height="0"
wasd-controls-enabled="false">
</a-entity>
</a-camera>
</a-scene>
</body>
</html>
*****更新*****正如@PiotrAdamMilewski在评论中建议的那样，我调查了一些问题，但实际上并没有真正起作用.但是我发现，当我添加此脚本并将此aframe组件用于视频领域时，我可以播放视频了.因此，我认为这并不是浏览器或OS的问题……
***** UPDATE *****I looked into some issues as @PiotrAdamMilewski suggested on the comment, but still it isn't really working. But I found that when I add this script and use this aframe component to the videosphere, I can play the video. So I assume it is not really browser or OS issue I guess...
所以现在我正在尝试将组件调整为触发视频播放的内容(自动播放最初应该执行).我真的是 Aframe 组件的新手，所以这真的需要一段时间，但如果有人能就此添加一些建议，我真的很感激！
So now I'm trying to tweak the component to be something that trigger the video to be played(which autoplay should do originally). I'm really new to Aframe component, so it's really taking a while, but I'd really appreciate if someone can add some advice on this!
AFRAME.registerComponent('play-on-window-click', {
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var video = this.el.components.material.material.map.image;
if (!video) { return; }
video.play();
}
});
推荐答案
据我所知(另请参见此链接)，macOS或iOS野生动物园已禁用自动播放.尽管自动播放政策似乎变化根据Chrome或Safari(及其版本)而定，有时允许 muted 视频自动播放.
As far as I know (also check this link), macOS, or iOS safari has disabled autoplay. Although autoplay policies seem to vary depending on chrome or safari (and their versions), sometimes muted videos are allowed to autoplay.
您应该添加任何用户互动来播放视频
You should add any user interaction to play the video
btn.addEventListener('click', function() {
videoElement.play()
})
// assuming btn is any clickable object, and videoElement is the <video>
对于组件，您只需在视频元素上调用 play()即可，而无需深入探讨材料:
As for the component, you can simply call play() on the video element, no need to go deep in the material:
AFRAME.registerComponent('play-on-window-click', {
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var video = document.getElementById('BankVideo')
if (!video) { return; }
video.play();
}
});
小故障此处
似乎您也可以在元素加载后在元素上调用
play().它适用于macOS Sierra 10.13.6.同样的故障，只是 timeout.html It seems you also can call
play() on the element after it's loaded. It works on macOS Sierra 10.13.6. Same glitch, just the timeout.html 这篇关于从A帧自动播放videosphere不能在任何浏览器(Safari/Chrome)上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！