How can I get the DOM id in the HTML widget?

Using JavaScript with Hype
1

I have to use webkit-playsinline for the video tag, so I add the HTML widegt include such as"<video webkit-playsinline=true>" into the scene.

And next I use a touch event to trigger video playing, but when I use hype.Document.getElementById or doucument.getElementById to select the video id, it does not work.
So How can I find the video’s ID in the HTML widegt?

2

Hi,

Initially :
if you are using a HTML Widget:

var theVid = hypeDocument.getElementById('theWidget').children[0];

.children[0] being the first element with in the HTML Widget

if you use a Rectangle element instead:

var theVid = hypeDocument.getElementById('innerElementId');

But a better answer if you can you post an example project of what you have setup.

3

Thanks for your answer, but what is ‘theWidget’ thing?

Here is the example hype file, check it please

videoElement.hype.zip (45.8 KB)

4

Ok, I assign id name to the HTML widegt like “myHTML”, and use hypeDocument.getElementById('theWidget').children[0], it worked.

But it capture ‘div’ tag, not ‘video’, so I still can’t play the video… :smiley:

5

What video ?

your src is “” so there is no video to play :confused:

6

Here are two examples:

Using a HTML Widget

  • The HTML Widget gets an id of theWidget

  • we also must have a video source in the video element. We will use one added to the resources

.

<video width="100%" id="myVideo" preload="auto" x-webkit-airplay="true" webkit-playsinline="true">
  <source src="${resourcesFolderName}/Untitled.mp4" type="video/mp4"> 
  </video>

  • In the playV() function , we drill down into the widget. document->theWidget–>iframe->iframe document->video element.

     var iframe= hypeDocument.getElementById('theWidget').children[0];
 
 var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 
 
 var myVid =  iframeDocument.getElementById('myVideo')
  
 
  myVid.play()

Using a Rectangle shape:

  • The Rectangle’s innerHTML is edited to get the same video element

.

    <video width="100%" id="myVideo" preload="auto" x-webkit-airplay="true" webkit-playsinline="true">
      <source src="${resourcesFolderName}/Untitled.mp4" type="video/mp4"> 
      </video>
  • In the playV()

is Simply.

var myVid= hypeDocument.getElementById('myVideo');
myVid.play();
7

Hence why using a rectangle’s innerHTML is much easier :smile: :smile: :sunny:

D

1 Like
8

I got it~ the rectangle way is cool and work well. Thanks a lot~