Add audio support and single playback in attributes. Readme update. #23
Conversation
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".
| @@ -15,7 +15,9 @@ class ARMarker extends HTMLElement { | |||
| src: this.content, | |||
| scale: {x: 1, y: 1, z: 1}, | |||
| 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).
| @@ -24,7 +26,9 @@ class ARMarker extends HTMLElement { | |||
| src: arContent.getAttribute('src'), | |||
| scale: this.stringToVec3(arContent.getAttribute('scale')), | |||
| 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), |
| @@ -50,12 +54,22 @@ class ARMarker extends HTMLElement { | |||
| }else{ | |||
| 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.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?
I played arround a little bit and like to have audio and looping controls on the html tag, so throw it in.