Advertisement:

Author Topic: Embedded Youtube Video Cue Points  (Read 658 times)

Offline njtweb

  • Full Member
  • ***
  • Posts: 572
Embedded Youtube Video Cue Points
« on: October 05, 2018, 12:49:11 PM »
I'm not sure if this would be the right place, if not please move. Thank you.

Is there a way to have links in a topic body play in the same embedded youtube video in that topic? I normally post a full game in a box score topic. You can watch the game in it's entirety right there in the post. But all of the links for the goals, (when clicked) open to the youtube page and play there. It would be great if it's possible to click the links and not leave my website, instead stay there and play the goals in the same embedded video.

Example:

Link 1 with cue point URL in youtube video &t=650

Link 2 with cue point URL in youtube video &t=949

Link 3 with cue point URL in youtube video &t=1346



[Embedded Video Here] <--- You can either click play and watch the entire game, or click the links above it in the post to go right to the goals.

Offline Virginiaz

  • Semi-Newbie
  • *
  • Posts: 45
Re: Embedded Youtube Video Cue Points
« Reply #1 on: October 05, 2018, 09:40:12 PM »
Yes: https://stackoverflow.com/a/26257588

And this is an example: http://jsfiddle.net/tfa7v3dy/7/

I'm not sure if your YT plugin gives the iframe an id, so you may need to mod it. You'll probably also need to tweak that example javascript code a bit so you can embed the script on each thread page, and then you can use your Admin status to insert html directly into the post, allowing you to easily do links like this:

<a href="javascript:seek(30);">Seek 30 seconds in</a>

I would say use the [url][/url] bbcode, but it automatically prepends http:// to it, rendering it non-functional.

Offline njtweb

  • Full Member
  • ***
  • Posts: 572
Re: Embedded Youtube Video Cue Points
« Reply #2 on: October 09, 2018, 01:26:27 PM »
Yes: https://stackoverflow.com/a/26257588

And this is an example: http://jsfiddle.net/tfa7v3dy/7/

I'm not sure if your YT plugin gives the iframe an id, so you may need to mod it. You'll probably also need to tweak that example javascript code a bit so you can embed the script on each thread page, and then you can use your Admin status to insert html directly into the post, allowing you to easily do links like this:

<a href="javascript:seek(30);">Seek 30 seconds in</a>

I would say use the [url][/url] bbcode, but it automatically prepends http:// to it, rendering it non-functional.

I used to use Ohara but had formatting issues in conjunction with using the tinyportal plugin. I uninstalled that and changed to using simple audio video embedder. I looked through those two links you posted and none of it makes sense.

Offline vbgamer45

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 20,459
    • smfhacks on Facebook
    • VBGAMER45 on GitHub
    • @createaforum on Twitter
    • SMF For Free
Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Offline njtweb

  • Full Member
  • ***
  • Posts: 572
Re: Embedded Youtube Video Cue Points
« Reply #4 on: October 11, 2018, 09:33:44 AM »
Thank you, but after careful consideration I've decided that's not going to work for me. Instead I'd like to change it up a bit.

I still want the video to play in the page, (not leave my site). Is there a way to make the links play the youtube video in a high slide type format when clicked? Click the link and the video player pops up with dark background? Or is that exclusively for sites who upload their own video to their site and use their own video player?

Thank you I appreciate the replies.

Offline Aleksi "Lex" Kilpinen

  • A Peculiar Finn
  • Lead Support Specialist
  • SMF Super Hero
  • *
  • Posts: 17,383
  • Gender: Male
  • Don't worry, I'm n00b friendly
    • Aleksi.Kilpinen on Facebook
    • aleksi-kilpinen on LinkedIn
Re: Embedded Youtube Video Cue Points
« Reply #5 on: October 11, 2018, 11:13:42 AM »
Theoretically that might be possible, but generally Youtube does it's best to force everyone to use their own player.
A Finnish Support Specialist
 Happily running multiple SMF 2.0 installations.

How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum.
 Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 69,279
    • StoryBB/StoryBB on GitHub
Re: Embedded Youtube Video Cue Points
« Reply #6 on: October 11, 2018, 12:45:38 PM »
It is possible to create something that uses the YT player code and navigates to the right points in time but it's not a small amount of work at all, unfortunately. I remember spending an afternoon just to integrate the YT player code to bring up a video in a Bootstrap model and have it pause when the model was closed.

Making it as a bbcode will be really tough too.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline njtweb

  • Full Member
  • ***
  • Posts: 572
Re: Embedded Youtube Video Cue Points
« Reply #7 on: October 11, 2018, 03:58:33 PM »
Ok, understood. Thanks for the replies.

Offline Virginiaz

  • Semi-Newbie
  • *
  • Posts: 45
Re: Embedded Youtube Video Cue Points
« Reply #8 on: October 11, 2018, 09:20:16 PM »
njtweb: It's very doable with the video mod you said you were using. I just took a look at it. You would just have to tweak the simple audio embed mod to add an id="" parameter to the youtube embed code, as well as adding "&enablejsapi=1" to the end of the url, and adding the YouTube script API file link as well.

For instance, I whipped this up on a test page, and it skips ahead in video I embedded when you click the button:

Code: [Select]
    <script src="http://www.youtube.com/player_api"></script>
    <iframe id="player" width="700" height="400" type="text/html" src="https://www.youtube.com/embed/ZPfNgIj2eNU?v=ZPfNgIj2eNU&list=RDZPfNgIj2eNU&t=2m3s&loop=0&enablejsapi=1" frameborder="0" mozallowfullscreen="" allowfullscreen="" webkitallowfullscreen=""></iframe>

    <script>
        var player, seconds = 0;
        function onYouTubeIframeAPIReady() {
            console.log("player");
            player = new YT.Player('player', {
                events: {}
              });
        }

        function seek(sec){
            if(player){
                seconds += sec;
                player.seekTo(seconds, true);
            }
        }
    </script>
    <br /><br />
    <button onclick="seek(1330)">Click me to skip 22:10m into the video</button>

I'd put together a quick thing for you but I'm really busy at the moment and what you're trying to do involves just enough small but tedious changes that it would take a little bit to get right. Maybe at the end of the month I can revisit this.

Offline njtweb

  • Full Member
  • ***
  • Posts: 572
Re: Embedded Youtube Video Cue Points
« Reply #9 on: October 12, 2018, 11:15:46 AM »
That sounds like what I'm looking for @Virginiaz.

I think I'm going to pass on the last project we discussed. The amount of traffic I was expecting once the season started hasn't really developed. I get more traffic based on topic discussion than I do the travel maps.

With that being said, I'd be interested in working with you for the youtube functionality instead. Please send me a PM when you know you think you'll have availability and we can discuss $$.

Thanks!