HTML [solved] Custom video player works in code editor but not in twine sugarcube 2.36.1

[Frogface29]

Hey,
I don't like the custom controls of the video player, so I did a little bit of digging and found this youtube video where a guy created his own video player controls (

You must be registered to see the links

) i have made some changes /improvements in my code editor (Visual Studio Code) and everything works fine. When I copy and paste it into twine sugarcube 2.36.1 the styling completely falls apart .

Spoiler: Video when run by the code editor

You don't have permission to view the spoiler content. Log in or register now.

Spoiler: Video when run in twine

You don't have permission to view the spoiler content. Log in or register now.

Spoiler: this is the full code

You don't have permission to view the spoiler content. Log in or register now.

I know that is a lot of code but i can't figure out for the life of me what the problem is so I included everything. I hope its is an easy fix/common problem. If you like the videoplayer and get it fixed, feel free to use it

 

[Alcahest]

If you share the html it is easier to see what the problem is instead of having to add everything to twine ourselves.

 

[Satori6]

When I copy and paste it into twine sugarcube 2.36.1 the styling completely falls apart .

That would suggest that some of the built-in CSS from Twine is messing it up. Check for inherited properties from .passage and other Twine-specific elements.

 

[Satori6]

Ok, I know what the issue is: Twine was dropped on its head as a baby, so instead of its text editor working like any other, it interprets line breaks in your passages as <br> elements.

Your buttons are messed up because Twine is adding line breaks before their icons.

To fix this, you can either enclose the relevant section in a <<nobr>> tag, or add a nobr tag to the passage itself.

 

[Frogface29]

Thank you so much, you literally fixed the issue that i have been working on for 3 days within minutes! That's very impressive! For anyone interested this is the fix.

Spoiler: <<nobr>> Fix applied to the html element

You don't have permission to view the spoiler content. Log in or register now.

 

[Satori6]

No problem! I think everybody who's used Twine has had to deal with those sneaky line breaks during our first project. haha

 

[Frogface29]

Okay i have another question, would it be possible to use a widget to call the video player so that i don't have the long html text in my passage? Or would i need to use a custom macro for that?
I have attached the html file this time. Thanks

 

[Satori6]

You should be able to write a widget for it. If the video player will always be the same, the only parameter needed would be the video source.

 

[Alcahest]

I've fixed the start and end of the VideoPlayerWidget passage, as shown in the code below. Now you can call it with <<VideoPlayer test>> to run test.mp4. This is just fixing that widget to play the video, I don't know it if adds the functions/look you want since I don't have the image assets used by the player.

I also removed an extra <</nobr>> at the bottom and I moved the <<nobr>><</nobr>> to start and end of passage. That way, you don't need to add it in each widget if you want to add more widgets here. Also added autoplay but that's optional of course.

<<nobr>>
<<widget "VideoPlayer">>
<<set  _videoSource to _args[0]+".mp4">>
<<set  _dataUrl to "">>

/*************** skipped *************/

    <video @src="_videoSource" autoplay>
        <track>
    </video>
</div>
<</widget>>
<</nobr>>

 

[guest1492]

Instead of writing a widget (which uses SugarCube / TwineScript), a macro (which uses JavaScript) should be written instead. This is because much of the functionality of the buttons is done by attaching event listeners, and thus they would need to be attached to a new element for each new video.

If you insist on using a widget, you could attempt to do the same by adding the JS inside <<done>><<script>>your JS here<</script>><</done>> tags within the widget. However, this would lead to problems if you have more than one video in a passage due to the query selectors used.

Also, if you are really doing the above, then note that you are relying on implicit insertion of semicolons in your JS. If you surround your JS inside <<nobr>><</nobr>> tags, then it would all be on one line. Therefore, implicit semicolon insertion won't work properly. The single line comments would also cause everything after it to be commented out too. You could try using <<silently>><</silently>> tags specifically around your JS instead (or just fix your JS).

 

[Frogface29]

Instead of writing a widget (which uses SugarCube / TwineScript), a macro (which uses JavaScript) should be written instead. This is because much of the functionality of the buttons is done by attaching event listeners, and thus they would need to be attached to a new element for each new video.

If you insist on using a widget, you could attempt to do the same by adding the JS inside <<done>><<script>>your JS here<</script>><</done>> tags within the widget. However, this would lead to problems if you have more than one video in a passage due to the query selectors used.

Also, if you are really doing the above, then note that you are relying on implicit insertion of semicolons in your JS. If you surround your JS inside <<nobr>><</nobr>> tags, then it would all be on one line. Therefore, implicit semicolon insertion won't work properly. The single line comments would also cause everything after it to be commented out too. You could try using <<silently>><</silently>> tags specifically around your JS instead (or just fix your JS).

Sorry mate but I did not understand any of that. I tried creating a macro and failed miserably. Working on my game really help me learn JS, but still I am praying to God that the JS that I will create after this video player will be smooth sailing. The widget fortunately works as intended

However, I have run into another problem. Right now, when there are two videos visible on the page and the controls of the top video disappear, the videos start to "wiggle" for a second. The wiggeling also happens when i pause and play the video using my input keys (spacebar or k). The wiggeling happens independently from the type of video i use.

Spoiler: Functions that I added to the JS code that might lead to the issue

You don't have permission to view the spoiler content. Log in or register now.

 

[guest1492]

Sorry mate but I did not understand any of that. I tried creating a macro and failed miserably. Working on my game really help me learn JS, but still I am praying to God that the JS that I will create after this video player will be smooth sailing. The widget fortunately works as intended

However, I have run into another problem. Right now, when there are two videos visible on the page and the controls of the top video disappear, the videos start to "wiggle" for a second. The wiggeling also happens when i pause and play the video using my input keys (spacebar or k). The wiggeling happens independently from the type of video i use.

I didn't notice a problem viewing two videos on the page. It's unlikely, but maybe it's caused by the videos themselves. I obviously don't have your videos so I tested with videos that I already have on my computer.

Attached is a very basic example of turning your code into a macro. I made a few changes by cutting out some stuff I didn't think you would use.