Trouble with HTML embed code of hosted video

Trouble with HTML embed code of hosted video

由Gitta Siekmann發表於
Number of replies: 13

Dear fellow Moodlers.

This is a problem with embedding videos we have encountered in Moodle 1.9.7.

Until recently we have used YouTube videos in our course. We embedded video via the embed code copied from YouTube and inserted into the html editor. No problems whatsoever.

Now we are using a different video host service. They provide an embed code looking like this:

<script type="text/javascript" src="http://player.cdn.vioapi.com/v5.5/viostream.player.js"></script>

<script type="text/javascript" src="http://player.cdn.vioapi.com/v5.5/JSEmbed.axd?mediaId=de619033-6809-4efa-be12-0804dba18483">options={AutoRewind:false,AutoStart:false,PlayerSelect:false,Player:"flv",Speed:"high"}</script>

I am not very knowledgeable about the finer details of html scripting. This code changes in Moodle for some reason. And the embedded video does not play properly.

The host provider's response was:

"....It looks as though the embed code has been rendered out from the second script and then embedded. This will result in the embed only working in certain browsers. [..] If you view the source of the page that the embed code is in, you should see the original code , currently it appears as the rendered HTML code.[...]It does look like the javascript is still being evaluated by the CMS even though you are entering the scripts via the HTML source editor. ....."

I don't what to do next. Any help would be greatly appreciated.

Cheers from Australia, Gitta

評比平均分數： -
In reply to Gitta Siekmann

Re: Trouble with HTML embed code of hosted video

由Itamar Tzadok發表於
With 1.9.4+ the code seems to work just fine in firefox but IE8 issues a security warning (the site runs under SSL) and won't display the player if the warning is "acknowledged" although the code is executed such that if the warning is "dismissed" the player will show up. Hope this helps in any way. 微笑
評比平均分數：Useful (1)
In reply to Itamar Tzadok

Re: Trouble with HTML embed code of hosted video

由Gitta Siekmann發表於

Hi Itamar,

thanks for your response. Does this mean I can't use this script in the current Moodle version under IE8? Or in other words - I can't manipulate the script in any way to make it work? Just out of curiosity - why does the YouTube html code work.

Would you happen to know if this will still be a problem in Moodle 2.0?

Many thanks,

Gitta

評比平均分數： -
In reply to Gitta Siekmann

Re: Trouble with HTML embed code of hosted video

由Itamar Tzadok發表於
I've tried it on Moodle Features Demo and it doesn't work on both Firefox and IE so it is probably something with recent versions. It does play in the editor but not on the page. I'm not too familiar with the inner workings of these recent versions so I can't tell what's going on. Perhaps one of the multimedia gurus could take it up and enlighten us. 微笑
評比平均分數： -
In reply to Gitta Siekmann

Re: Trouble with HTML embed code of hosted video

由Itamar Tzadok發表於
Until we figure out what's going on try the following approach. Create a simple html file. Paste the provider code into that file. Upload the file to the course Files. Create a link to file resource on the course page and link the file. With a bit of luck it will work. 微笑
評比平均分數： -
In reply to Itamar Tzadok

Re: Trouble with HTML embed code of hosted video

由Glenys Hanson發表於
Hi Gita and Itamar,

There's another way of doing this I use frequently. I've just tested it in Moodle 1.9.9 It also works in 1.9.8 and probably earlier versions too.

Here's a link to instructions with screenshots: Fichier Insert a video from YouTube, etc.pdf
And here are the same step-by-step instructions :

1. The administrator needs to turn on the YouTube filter:
  • Site Administration > Modules > Filters > Multimedia Plugins > Enable YouTube link filter

2. On YouTube, click on the Share button and copy the code (not the code in <Embed>).

3. In your Moodle course, in any text editing field – in this example in a label :
  • Type 2/3 underscores (or spaces, or a word – it doesn't matter, they won't be visible).
  • Select what you've typed and click on the link icon:
  • In the window that appears, paste the YouTube code you copied:
  • Click on OK.
    You won't see any change in the text box – that's normal.
  • Click on Save and return to course.
  • And you will see the video.

Cheers,
Glenys


評比平均分數：Useful (1)
In reply to Glenys Hanson

Re: Trouble with HTML embed code of hosted video

由Itamar Tzadok發表於
It's not YouTube anymore, Glenys. It's a custom player from the service provider, which Moodle's main pages don't appreciate being its play-ground. 微笑
評比平均分數： -
In reply to Glenys Hanson

Re: Trouble with HTML embed code of hosted video

由Gitta Siekmann發表於

Thanks Glenys, this is a different take on the problem and I haven't thought of looking into Filter settings. I''l check it out.

Gitta

評比平均分數： -
In reply to Gitta Siekmann

Re: Trouble with HTML embed code of hosted video

由Itamar Tzadok發表於
Ok, I tested it on Moodle Features Demo and it works just fine on Firefox and IE8. So again, paste the code from the provider into a simple html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>

<script type="text/javascript" src="http://player.cdn.vioapi.com/v5.5/viostream.player.js"></script>
<script type="text/javascript" src="http://player.cdn.vioapi.com/v5.5/JSEmbed.axd?mediaId=de619033-6809-4efa-be12-0804dba18483">options={AutoRewind:false,AutoStart:false,PlayerSelect:false,Player:"flv",Speed:"high"}</script>

</body></html>


Upload the file into the course Files.
Now you can link to the file by means of a 'Link to a file of website' resource.
Alternatively you can embed it in a label or topic summary in the following way (assume http://demo.moodle.net/file.php/5/media/test.html is the url of the html file in your course Files):

<object height="300" width="100%" type="text/html" data="http://demo.moodle.net/file.php/5/media/test.html">
</object>


hth 微笑
評比平均分數：Useful (2)
In reply to Itamar Tzadok

Re: Trouble with HTML embed code of hosted video

由Gitta Siekmann發表於

Hi Itamar,

thank you so much for putting so much effort into this. I'll try this solution today.

Many thanks,

Gitta

評比平均分數： -
In reply to Itamar Tzadok

Re: Trouble with HTML embed code of hosted video

由Craig Gold發表於
Brilliant, this solution worked flawlessly for me, too. I mostly write to say THANK YOU.

I am also using a third party video provider that gives JS as the "embed" code, e.g.: 

<script type="text/javascript" src="http://content.bitsontherun.com/players/bX8loWCJ-ID2fOUpv.js"></script>

(an actual video in case you're interested)

I would love to just pop these script pointers into an existing Moodle container (label or page resource) without having to create an html page for each resource.

I am playing with Moodle 2.0 Preview 4, and was wondering, is there a way (will there be a way) to drop-in scripts like this directly as a resource without having to create a separate page?

It appears that the "Trusted Content" option should allow this, and it appears that the "Manager" role (which I am using) has this activated, but Label and Page are both being filtered.

Any insight is greatly appreciated.

-- Craig

評比平均分數： -
In reply to Craig Gold

Re: Trouble with HTML embed code of hosted video

由Eric Maikranz發表於

I was able to do this from within a lesson.

First create the standalone webpage with the JS streaming video call per the instructions in this post, then put the url into the pop up to file or web page link in the lesson edit screen.  It will then show up under linked media and will pop up on a new window. 

Drawback is that you can't seem to have more than one pop up to file or web page on a single lesson so you couldn't do a video call out and a diagram on the same lesson. 

Is it just me or is the HTML editor in 1.9.x a hot mess?  This think absolutely mangles any and all javascript code. 

Eric

評比平均分數： -