Add audio support and single playback in attributes. Readme update.#23
Add audio support and single playback in attributes. Readme update.#23RobTranquillo wants to merge 3 commits intorodrigocam:masterfrom
Conversation
rodrigocam
left a comment
rodrigocam
left a comment
There was a problem hiding this comment.
Thank you so much for your contribution @RobTranquillo! A few changes can be made so I can merge your contribution!
| ```html | ||
| <ar-scene> | ||
| <ar-marker patt="hiro.patt" content="hiro.gif" scale="1 1" position="0 0 0" rotation="0 0 0"></ar-marker> | ||
| <ar-marker patt="cat.patt" content="cat.mp4" audio="1" loop="0"></ar-marker> |
There was a problem hiding this comment.
For a more semantic style, I think "0" or "1" could be changed to "true" or "false".
| position: {x: 0, y: 0, z: 0}, | ||
| rotation: {x: 0, y: 0, z: 0} | ||
| rotation: {x: 0, y: 0, z: 0}, | ||
| loop: 0, |
There was a problem hiding this comment.
Change these integers (0 or 1) to really booleans (true or false).
| position: this.stringToVec3(arContent.getAttribute('position')), | ||
| rotation: this.stringToVec3(arContent.getAttribute('rotation')) | ||
| rotation: this.stringToVec3(arContent.getAttribute('rotation')), | ||
| loop: arContent.getAttribute('loop'), |
There was a problem hiding this comment.
Here you can use something inline if:
| loop: arContent.getAttribute('loop'), | |
| loop: arContent.getAttribute('loop'), | |
| loop: (arContent.getAttribute('loop') == "true" ? true : false), |
| this.video = document.createElement("video"); | ||
| this.video.src = this.contentProps.src; | ||
|
|
||
| this.video.loop = true; |
There was a problem hiding this comment.
With the previous changes here you can do:
| this.video.loop = true; | |
| this.video.loop = this.contentProps.loop; |
| this.video.loop = false; | ||
| } | ||
|
|
||
| this.video.muted = true; |
There was a problem hiding this comment.
| this.video.muted = true; | |
| this.video.muted = !this.contentProps.audio; |
| rotation: this.stringToVec3(arContent.getAttribute('rotation')) | ||
| rotation: this.stringToVec3(arContent.getAttribute('rotation')), | ||
| loop: arContent.getAttribute('loop'), | ||
| audio: arContent.getAttribute('audio') |
There was a problem hiding this comment.
| audio: arContent.getAttribute('audio') | |
| audio: (arContent.getAttribute('audio') == "true" ? true : false) |
| } | ||
|
|
||
| this.video.muted = true; | ||
| if(this.contentProps.audio == 1) |
There was a problem hiding this comment.
With the previous changes, these lines can be removed
| this.video.src = this.contentProps.src; | ||
|
|
||
| this.video.loop = true; | ||
| if(this.contentProps.loop == 0) |
There was a problem hiding this comment.
With the previous changes, these lines can be removed
|
|
||
| } else if(ev.data.marker.id == markerId) { | ||
| if(self.video.ended != 0 && self.contentProps.loop == 0) |
There was a problem hiding this comment.
The problem with this line is when the video ended if I have to update the page to play again. When the marker goes out of the camera vision and then returns, the video doesn't play again. This is the expected behavior?
2 participants
I played arround a little bit and like to have audio and looping controls on the html tag, so throw it in.