If you don't find an answer, please click here to post your question.
Reply
Occasional Contributor
Posts: 2
Registered: ‎02-04-2018

Embed code doesn't support multiple videos

Hi guys,

In Ooyala player version 4 we found the embed code doesn't work when there are mutiple videos on the page, the example as follow:

<!DOCTYPE html>
<html>
<body>
<!-- This embed code automatically includes and packages standard Player V4 plugins. If you need a different mix of plugins, please use the Advanced embed option. To see the included plugins, please refer to this doc: http://help.ooyala.com/video-platform/concepts/pbv4_release_notes.html -->
<script src="//player.ooyala.com/core/[Player_ID]"></script>
<!-- The following div will contain the instantiated player, and is identified by id -->
<div id='container_1517535575' ></div>
<!-- Player parameter modify some basic player behaviors and looks -->
<script>
var playerParam = {
'autoplay':false,
'loop':false
};
OO.ready(function() {window.pp = OO.Player.create('container_1517535575', '[Video_ID_1]', playerParam);});

</script>

 

<script src="//player.ooyala.com/core/[Player_ID]"></script>
<!-- The following div will contain the instantiated player, and is identified by id -->
<div id='container_1517535576' ></div>
<!-- Player parameter modify some basic player behaviors and looks -->
<script>
var playerParam = {
'autoplay':false,
'loop':false
};
OO.ready(function() {window.pp = OO.Player.create('container_1517535576', '[Video_ID_2]', playerParam);});

</script>
</body>
</html>

What we found is there is a <div class="oo-player-skin"> tag being add twice. The result of that is the video is not clickable anymore.

 

Is this an issue in Ooyala, or if I miss anything?

 

Cheers,

Yilun

 

 

 

 

 

Ooyalan
Posts: 5
Registered: ‎01-22-2017

Re: Embed code doesn't support multiple videos

[ Edited ]

Hi Yilun,

 

Thanks for contacting us!

 

You can try the following code and it should help in supporting multiple videos.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script language="javascript" src="http://player.ooyala.com/static/v4/production/latest/core.js"></script>
    <script src="http://player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.js"></script>
    <script src="http://player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.js" ></script> 
    <link  rel="stylesheet"  href="http://player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.css"></script>
</head>
<body>
 <div id='container1' style='text-align:right;display:block'>
      <div id='player1' style='width:480px;height:360px;display:inline-block'></div>
    </div>
    <div id='container2' style='text-align:topLeft;display:block'>
      <div id='player2' style='width:480px;height:360px;display:inline-block'></div>
    </div>
    <div id='OOYALA_TEST’></div>
</body>
</html>
<script>
      OO.ready(function() {
        window.pp1 = OO.Player.create('player1', ‘EMBED_CODE’, {
          "playerBrandingId”:”PLAYER_ID”,
          "pcode”:”YOUR_PCODE”,
          "skin":{
          "config":"https://player.ooyala.com/static/v4/stable/4.20.8/skin-plugin/skin.json"}]
        }
        });

        window.pp2 = OO.Player.create('player2', ‘EMBED_CODE’, {
          "playerBrandingId":"PLAYER_ID",
          "pcode":"YOUR_PCODE",
          "skin":{
          "config":"https://player.ooyala.com/static/v4/stable/4.20.8/skin-plugin/skin.json"}]
        }
        });
      });
</script>

 

 

Please let us know how it goes! 

 

Thanks,
Vidya

Highlighted
Occasional Visitor
Posts: 3
Registered: ‎05-16-2018

Re: Embed code doesn't support multiple videos

[ Edited ]

hello,

presently, the only way to reliably embed video on an internet page so that each one users can see it irrespective of browser or running system, is with Flash. This calls for the Adobe Flash plugin and a aggregate of the and tags.

maximum users have the Flash plugin mounted already (genuinely, something like ninety five% of net-related customers have a few model of it), but proponents of HTML five are pushing for an open video standard that doesn’t require any plugins. That’s the concept behind the brand new tag in HTML five — it gives a manner to embed (and interact with) video without the need for a proprietary plugin like Flash.

sadly, video isn’t that simple. not most effective does the browser need to apprehend the tag, it additionally needs to have the vital codec to play the video. the obvious answer could be for the authors of the HTML five specification to choose a video codec and mandate that each browser maker implements it.

 

Occasional Advisor
Posts: 6
Registered: ‎05-08-2018

Re: Embed code doesn't support multiple videos

The <video> Tag

As you’ll recall, in HTML5 embedding video essentially comes down to using a single tag: <video>. But as with any HTML tag, you have a lot of options for parameters. Here are the essentials within the tag itself:

src: the location and name of the source video, it works the same as the src parameter for the <img> tag. Note, however, that rather than identifying the video source here, you can, and probably should, do that outside the tag (see below).

<video id="sampleMovie" src="HTML5Sample.mov"></video>

width and height: (optional) dimensions of the video. More accurately, this is the width and height of the video frame, rather than the video itself. As with <img>, leaving this out will cause the browser to default to the dimensions of the source video. However, unlike <img>, putting in a size different than the source will scale the video, rather than skew it. In other words, the embedded video will retain the ratio of its source. If you specify a size smaller than the source, the entire video will scale down. However, if you specify a size larger than the source, the video will display in its original size, with the remainder of the dimensions you specified filled by empty space.

<video id="sampleMovie" src="HTML5Sample.mov" width=”640” height=”360”></video>

controls: adds a default video control overlay. This is useful if you don’t want to create your own custom control. However, if you do want to delve into customizing the player controls, you can use JavaScript and CSS. The spec allows for manipulation of methods and properties such as play(), pause(), currentTime, volume, muted and more.

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

preload: begins downloading the video as soon as the user hits the page. To instruct the video to preload, simply include the attribute. To instruct it not to preload, set the attribute equal to “none.”

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>

<video id="sampleMovie" src="HTML5Sample.mov" preload=”none”></video>

autoplay: pure evil. This instructs the browser to begin playing the video as soon as the page loads. Do not use this.

<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>

Now comes the magic. The HTML5 spec includes a handy quirk that allows you to compensate for the browser dysfunction currently happening around the video format. Rather than specifying the video source using the src attribute, you can nest multiple tags within the <video> tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" />
	<source src="HTML5Sample_Ogg.ogv" />
	<source src="HTML5Sample_WebM.webm" />
</video>

If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.

Ideally, though not strictly necessary on all browsers, you should include a MIME type in the type parameter to ensure compatibility with all browsers. This parameter should specify video type, as well as the video and audio codec. The specifics of the parameter will depend solely on how you encode your video. A list of the many possibilities can be found here: http://wiki.whatwg.org/wiki/Video_type_parameters.

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

As an example of all three video types in action, visit my own site.

On this page, you’ll see source code for three different videos: H.264, Ogg and WebPM. The videos themselves are labeled with their codec, so you can see what shows up in your browser.

One small gotcha regarding MIME types: your server needs to be configured to recognize the various types. For Windows Server, that means adding entries for the various MIME types to IIS. For Apache servers, you’ll need to add the AddType directive to your httpd.conf or local .htaccess files:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Graceful Degradation

Though a full multi-source <video> tag will work across multiple browsers that are HTML5 ready, it still doesn’t address older, pre-HTML5 browsers. Fortunately, the spec includes a mechanism for downward compatibility.

Take whatever <object> tag you are currently using, or would use pre-HTML5, and add it to the bottom of the <source> parameter list. Typically, this object will specify the player you’re using (presumably a third-party plug-in), as well as the parameters and source for that player. The following example uses Flowplayer, a popular third-party player with an available free version.

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
	</object>
</video>