search

PfDK / PfDK.github.io

GNU General Public License v3.0
13 stars 5 forks source link

Beyond the example video #2

Open GreatWhiteJ opened 5 years ago

GreatWhiteJ commented 5 years ago

Hi. this is a fantastic idea, but the only video transcript i can seem to add to my page is the one from the example.

Admittedly, I'm web novice, so it's probably something super simple.

I've changed all 3 id from the example id to a new youtube ID. the language element has been shifted to English and the language divider has been deleted, without any other modifications, as instructed..

here's my code for a khan academy video in English

        <iframe id="mbc3_e5lWw0" src="https://www.youtube.com/embed/mbc3_e5lWw0?enablejsapi=1" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></p>
        <div id="videoTranscriptmbc3_e5lWw0" class="mmocVideoTranscript" data-language="en"></div>

What am i missing?

arrawlings commented 4 years ago

I'm having the same issue.

<iframe id="BcibhO9UTjM" src="https://www.youtube.com/embed/BcibhO9UTjM?enablejsapi=1" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></p>
<div id="videoTranscriptBcibhO9UTjM" class="mmocVideoTranscript" data-language="en"></div>
GreatWhiteJ commented 4 years ago

Hi arrawlings. In the transcript part of your video, you need to add the data-name parameter (and make it blank) like this:

data-name=""

hope that helps.

arrawlings commented 4 years ago

Hi GreatWhiteJ. Amazing. Thought I'd already tried that. Thank you!

seanvosler commented 3 years ago

No luck with english... tried several different edits based on info above, any advice?

`

`

etsikt commented 3 years ago

Hi @seanvosler. Short answer: The solution is already found by @GreatWhiteJ above. You must set data-name="" in your case. I've added another example to the code and you can see it live here: https://pfdk.github.io/modules/ytexample2.html

Long answer: So how can you know if data-name should be empty or not? If you turn on/off subtitles when playing a youtube video, you will see in the network inspector that the browser fetches a link like this for your video:

https://www.youtube.com/api/timedtext?v=t2AH0T8Wa4U&exp=xftt&xorp=true&xoaf=5&hl=en&ip=0.0.0.0&ipbits=0&expire=1623990571&sparams=ip%2Cipbits%2Cexpire%2Cv%2Cexp%2Cxorp%2Cxoaf&signature=4F254943BE5E3A6F05D7D2B3F6AD08533A54F4BD.012165E6390054179E8836CC9B74D4106CFD2D51&key=yt8&lang=en&fmt=json3&xorb=2&xobt=3&xovt=3

Notice the lang=en parameter. This is what you need to specify as the data-language parameter, i.e. data-language="en"

In the case of my example video, the url being fetched is: https://www.youtube.com/api/timedtext?v=Lm0m4VtZ3Us&asr_langs=de%2Cen%2Ces%2Cfr%2Cit%2Cja%2Cko%2Cnl%2Cpt%2Cru&caps=asr&exp=xftt&xorp=true&xoaf=5&hl=en&ip=0.0.0.0&ipbits=0&expire=1623990758&sparams=ip%2Cipbits%2Cexpire%2Cv%2Casr_langs%2Ccaps%2Cexp%2Cxorp%2Cxoaf&signature=2491BA76C97C4BE14D1C6998144BCBF4D4D7B46E.31E20E3938D9530A917F046555EE8C78D5AFE5E2&key=yt8&lang=no&name=bokm%C3%A5l&fmt=json3&xorb=2&xobt=3&xovt=3

Notice the name=bokm%C3%A5l parameter. I am not exactly sure when the name parameter is present. But I think it has to do with how subtitles have been added to the video.

Hope that helps!