Testing Music Video Links and Embeds for @taskmaster4450le

avatar


Testing Music Video Links and Embeds for @taskmaster4450le

@taskmaster4450le is working on turning LeoThreads into a music center. This post is to see what works and what doesn't.



Cover image is an edited screen capture taken from LeoThreads.

YouTube image inside screen capture is included under Fair Use Doctrine


Introduction

Twitter (now called X) began for a specific purpose. Over time, its users found other uses for the platform.

LeoThreads has come a long way from its debut in 2022.

According to @taskmaster4450le, LeoThreads can be used as a database to store database-type records. Hive blockchain is itself a database, but that's not what he's talking about here. Each thread can contain one record for a specific type of data.

Proof of Concept

It's already being done with quotations. The thread just needs-- at a minimum-- the quote and its quoter (even if the quoter is "Anonymous" or "Unknown"). One quote per thread, just as a database has one record per entry.

Taking It to the Next Level

Taking this idea to the next level, LeoThreads can be used to store links to music videos. Because why should we go to Spotify (or even YouTube.com) when we can find music we like at InLeo?

Until the Hive Ecosystem gets its own universe of music videos, we have to rely on YouTube and a few of its closest competitors. So this means most links will point to YouTube, etc.

Data Needed for Each Thread

Each thread contains these 4 items:

  • music artist;
  • title of the music piece (to include instrumentals and themes);
  • the IFRAME code for the video hosted elsewhere; and
  • the #musiconleo hashtag

The database won't use the hashtag. Instead, it's included so that @taskmaster4450le can locate the new record and add it to his database.

URL or IFRAME Code?

Although it's been done by some people, using the YouTube URL which contains the text string /watch?v= isn't reliable for LeoThreads purposes.

So it's recommended that we use the embed URL instead. When we look at the IFRAME code, it's the URL containing this text string: /embed/.

What's being tested is whether we need actual IFRAME code (which includes the embed URL), or if the embed URL can be used all by itself. Even if it appears OK when we view the thread as a long form post (whether with InLeo or with a Layer 1 front-end), it needs to be viewable within LeoThreads. If all LeoThreads displays is a link (or nothing), then that's not good.

Below are 4 test cases featuring music videos from singer Claire Littley.

(I've been meaning to hear her more recent songs for a while, and this test post gave me the reason to do so.)

Tests 1 and 3 use only the embed URL. Tests 2 and 4 use the IFRAME code provided by YouTube's Share widget.

If Tests 1 and 3 fail, then we're required to use the IFRAME code.

If Tests 1 and 3 succeed, then we can save ourselves some grief and use the embed URL which is part of the IFRAME code.

Here are the test cases:

Test 1: Embed URL only -- No IFRAME Code

Claire Littley -- Quietly -- NIGHTFALL (2023-January-25)

Code used:
Qhttps://www.youtube.com/embed/EQau85QOoyQ?si=4VmU7xb1gfiY00OR

NOTE: The Q before the URL protocol was added in order to display the code fragment properly. Don't include that Q in your actual threads.


Test 2: Complete IFRAME Code -- unedited, nothing added or removed

Claire Littley -- Couldn't Walk Away -- NIGHTFALL (2023-January-26)

Code used:
<iframe width="560" height="315" src="Qhttps://www.youtube.com/embed/bcHl8iUcfUU?si=StxlaU9lzm7Orzi-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

NOTE: The Q before the URL protocol inside the SCR= attribute was added in order to display the code fragment properly. Don't include that Q in your actual threads.


Test 3: Embed URL only -- No IFRAME Code

Claire Littley -- Night Was Falling -- NIGHTFALL (2023-January-26)

Code used:
https://www.youtube.com/embed/1TiOnA2jsYE?si=G8b6BqNLcFjDrhrz

NOTE: The Q before the URL protocol was added in order to display the code fragment properly. Don't include that Q in your actual threads.


Test 4:Complete IFRAME Code -- unedited, nothing added or removed

Claire Littley -- I Don't Like the Rain -- NIGHTFALL (2023-January-26)

Code used:
<iframe width="560" height="315" src="Qhttps://www.youtube.com/embed/LmsnGyH_bs4?si=tgUezE56howDD9T5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>></iframe>

NOTE: The Q before the URL protocol inside the SCR= attribute was added in order to display the code fragment properly. Don't include that Q in your actual threads.


Safe Edits to IFRAME Code

Depending on how long the thread happens to be, only remove as many of these items as necessary:

  • autoplay;-- ALWAYS!! (Note the trailing space)
  • picture-in-picture; (Note the trailing space)
  • allowfullscreen
  • frameborder="0"

The Most Minimal IFRAME Code We Can Use

For LeoThreads purposes, using the using IFRAME code to show video content is a must. The embed URL outside the IFRAME is handled differently by different front-ends. Ecency handles it as if it is inside an IFRAME. InLeo (via YouTube) spits out an error message or just shows a URL.

Place the embed URL inside the double quotes of src="", then place that inside the opening IFRAME tag. Then include the closing IFRAME tag. That's it!!


Observations

Front-Ends Matter

When I used Ecency to compose this post, it rendered video for all 4 tests. The InLeo front-end causes either a URL to be displayed or YouTube to throw the error message This video is unavailable. This isn't what any of us want to see on LeoThreads for any music video we want added to the database.

Conclusion

If you want to access these music videos within the InLeo environment (and, more specifically, LeoThreads), the IFRAME code must be used.

Note for InLeo Premium Users

Since you can post threads longer than 240 charcters, you're all set! Nothing more to know when adding music videos for @taskmaster4450le to add to

Note for InLeo BASIC Users

Code counts toward the 240-character thread limit. Even if you can include the complete IFRAME code, there is still the hashtag and basic data. To accomodate the basic data (music artist and song) plus the #musiconleo hashtag, the IFRAME code needs to be shortened. If necessary, use the most minimal IFRAME code.

Just My Two Sats

Why should we have to listen to music from Spotify or watch videos from places such as YouTube while we're threrading?

Thanks to Hive blockchain's fundamental nature as a database, LeoThreads is used as a database of microblog entries. Microblogs are great for storing short bits of information or content. One use case is quotations by famous people or proverbs from various cultures. Another use case, building on the one for quotations, is sharing music videos.

It's trickier to add video to a page than it is a graphic element. Different applications handle video links in different ways. Even if we want to view them using a different front-end, that doesn't mean InLeo will handle that video properly.

Do we need the complete IFRAME code? Can we just use only the embed URL? This post has 4 test cases, and only the IFRAME tests succeeded.

Can we use a stripped-down IFRAME for the video?

As shown in this post as rendered by InLeo, this means we must use IFRAME code; the embed URL by itself isn't enough here.

Many people can use the IFRAME code supplied by YouTube as is, or with slight modifications to account for 240 characters.

If the 240-character thread limit is a barrier (which it is not at InLeo Premium), then a stripped-down IFRAME can be used. This IFRAME contains the embed URL inside the SRC= attribute.



I'm @magnacarta (graphic-signature made by @ahmadmanga)[!!]
Thanks for taking time to read this post. If you found it useful or worth your time, please give it an upvote and/or a reblog. If I left out any other points regarding the tests I made, please leave a comment. Feedback is welcome.

[!!] -- Graphic signature was designed by @ahmadmanga

Posted Using InLeo Alpha



1 comments
avatar

Congratulations @magnacarta! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You received more than 30000 upvotes.
Your next target is to reach 35000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out our last posts:

Hive Power Up Day - December 1st 2023
0
0
0.000