shaka-player
shaka-player copied to clipboard
Enforce Loading VAST ads with only streaming HLS/MPEG-DASH MediaFiles
Have you read the Tutorials? Yes
Have you read the FAQ and checked for duplicate open issues? Yes
What version of Shaka Player are you using? "shaka-player": "^4.0.1"
I have a working VAST tag but it relies on including a mediafile of type .mp4 to be loaded progressively. My software architecture is a streaming setup in that all files are transcoded into video and audio files and set up using Shaka Packager. I need to enforce Shaka Player to load the Streaming media files HLS/Mpeg-dash files without error because right now that ad wont load without me including that .mp4 media file, but that file does not include audio because its converted with shaka packager.
You can test the vast tag included below here: https://googleads.github.io/googleads-ima-html5/vsi/ It works, but I need it to work without the "progressive" media file and solely rely on HLS/Mpeg-dash files to play in shaka player.
If I remove that progressive .mp4 media file all I get is "TypeError: Cannot read properties of null (reading 'isLinear')"
<Vast version="3.0">
<script/>
<Ad id="924c0ecb3cf149d198fdaf7a55576a71">
<InLine>
<AdSystem>Tycoon</AdSystem>
<AdTitle>One of those days</AdTitle>
<Description><![CDATA[ And then everything disappeared ]]></Description>
<Error><![CDATA[ http://localhost:6010/ads/error?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac ]]></Error>
<Impression><![CDATA[ http://localhost:6010/ads/view?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac ]]></Impression>
<Creatives>
<Creative id="63fc01dc50af45988feac2208ff087ac" AdID="924c0ecb3cf149d198fdaf7a55576a71" sequence="1">
<Linear>
<Duration>00:01:20</Duration>
<TrackingEvents>
<Tracking event="start">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=start ]]>
</Tracking>
<Tracking event="firstQuartile">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=firstquartile ]]>
</Tracking>
<Tracking event="midpoint">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=midpoint ]]>
</Tracking>
<Tracking event="thirdQuartile">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=thirdquartile ]]>
</Tracking>
<Tracking event="complete">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=complete ]]>
</Tracking>
<Tracking event="pause">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=pause ]]>
</Tracking>
<Tracking event="mute">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=mute ]]>
</Tracking>
<Tracking event="fullscreen">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=fullscreen ]]>
</Tracking>
<Tracking event="acceptInvitationLinear">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=acceptinvitationlinear ]]>
</Tracking>
<Tracking event="closeLinear">
<![CDATA[ http://localhost:6010/ads/track?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&event=closelinear ]]>
</Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough id="Tycoon">
<![CDATA[ http://localhost:6010/ads/click?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac ]]>
</ClickThrough>
</VideoClicks>
<MediaFiles>
<MediaFile id="Tycoon" delivery="progressive" width="426" height="240" type="video/mp4" minBitrate="49" maxBitrate="258" scalable="true" maintainAspectRatio="true">
<![CDATA[ https://d2wj75ner94uq0.cloudfront.net/video/63fc01dc50af45988feac2208ff087ac-720.mp4 ]]>
</MediaFile>
<MediaFile id="Tycoon" delivery="streaming" width="426" height="240" type="application/x-mpegURL" minBitrate="49" maxBitrate="258" scalable="true" maintainAspectRatio="true">
<![CDATA[ https://d2wj75ner94uq0.cloudfront.net/video/63fc01dc50af45988feac2208ff087ac-hls.m3u8 ]]>
</MediaFile>
<MediaFile id="Tycoon" delivery="streaming" width="426" height="240" type="application/dash+xml" minBitrate="49" maxBitrate="258" scalable="true" maintainAspectRatio="true">
<![CDATA[ https://d2wj75ner94uq0.cloudfront.net/video/63fc01dc50af45988feac2208ff087ac-mpd.mpd ]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative id="63fc01dc50af45988feac2208ff087ac" sequence="1">
<CompanionAds>
<Companion id="63fc01dc50af45988feac2208ff087ac" width="300" height="250">
<StaticResource creativeType="image/png">
<![CDATA[ https://pagead2.googlesyndication.com/simgad/4446644594546952943 ]]>
</StaticResource>
</Companion>
</CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</Vast>
Im looking for where to set ads rendering settings, set mime type
The ad is chosen from the VAST manifest by the IMA SDK, not us. Looking at their SDK documentation, I don't see any field that seems to let you choose ads by delivery
type. Maybe setFeatureFlags, but that has very little documentation. If the SDK has no way of choosing ads that way, I'm not sure there's anything we can do on that front, sadly.
As for that error... that sounds like it would be from the call in here:
https://github.com/shaka-project/shaka-player/blob/b6ab76976211852e96b2883562166a5e1e4dd0f2/lib/ads/client_side_ad_manager.js#L408-L420
There would only be a TypeError if IMA SDK fires an CONTENT_PAUSE_REQUESTED
or STARTED
event with no ad.
Looking at our sample content, it seems like we only have stuff with a delivery
value of progressive
. I'm wondering if we are handling CONTENT_PAUSE_REQUESTED
events incorrectly, and just never realized it until now. We are assuming it's fired when we have an ad object, but the description in the docs doesn't actually say that as far as I can tell?
If you remove the event listener here:
https://github.com/shaka-project/shaka-player/blob/b6ab76976211852e96b2883562166a5e1e4dd0f2/lib/ads/client_side_ad_manager.js#L259-L262
And then modify your VAST manifest to remove the progressive ad again, does it work?
When I comment that out it simply doesn't run. The playback stops like normal but the event doesnt fire. I see it is calling the "Error" endpoint in my VAST but I need to get more information to diagnose it on my Go service. How do I add error codes and error messages to the <Error></Error> element in my VAST tag?
Will shaka append the message using an error variable? If so what is the variable to add to the query params of the Error endpoint?
Update: I've since discovered you can use [ERRORCODE]. I have formatted it like so:
<Error><![CDATA[ http://localhost:6010/ads/error?id=924c0ecb3cf149d198fdaf7a55576a71&type=video&document=63fc01dc50af45988feac2208ff087ac&videoplayefailed[ERRORCODE] ]]></Error>
I got this: videoplayefailed: 403
Not very helpful. When I tried to log this.ad_
right before the cannot read properties of null "isLinear" I got undefined on the this.ad_. Maybe CORS, maybe I should format without CDATA? I don't know the purpose of CDATA but Im just following standards based on the Google Ad Tags.
Sorry, update cant be CORS. coming from same origin as working mp4 file when included in MediaFiles array
Also, to clarify. Commenting out 259 to 262 did not do anything. I commented out 427 to 435 and pointed my Shaka import to that edited dist after building with python. When I did this and I removed the mp4 file from media files it still stopped playback but it just wouldnt throw the error on client side but still tried to call "Error" on the vast tag with the error code 403.
Please see HAR here
HLS and Dash files if it provides any insight: hls dash
If I run the ad tag without the mp4 mediafile at https://googleads.github.io/googleads-ima-html5/vsi/ it tells me the same 403 error code but I get this
Ad error: AdError 403: Linear assets were found in the VAST ad response, but none of them matched the video player's capabilities.
I know that video player at that url is not a streaming player but maybe IMA doesn't detect the capabilities of Shaka to play dash/hls files for ads?
Taking a closer look here
The documentation from Google says:
Likely cause of a 403 VAST error
This fatal error can be caused by a VAST response that declares unsupported MIME types for all available MediaFiles (for example, Flash on mobile, or WebM on iOS). It may indicate that the wrong creative type attempted to play.
This error type is more common on mobile.
Recommended action
Publisher | Ensure that the creative format or technology requested is supported by the video player's device and platform. For example, VPAID creatives should not be requested from mobile apps. |
---|---|
Buyer | Ensure that all returned creatives respect the video format in the bid request. |
Seems more and more likely that IMA is not detecting Shaka Players ability to support hls and dash playback. MIME types I put are as follows, ripped directly from XML:
<MediaFiles>
<MediaFile id="Tycoon" delivery="streaming" width="426" height="240" type="application/x-mpegurl" minBitrate="49" maxBitrate="258" scalable="true" maintainAspectRatio="true">
<![CDATA[ https://d2wj75ner94uq0.cloudfront.net/video/63fc01dc50af45988feac2208ff087ac-hls.m3u8 ]]>
</MediaFile>
<MediaFile id="Tycoon" delivery="streaming" width="426" height="240" type="application/dash+xml" minBitrate="49" maxBitrate="258" scalable="true" maintainAspectRatio="true">
<![CDATA[ https://d2wj75ner94uq0.cloudfront.net/video/63fc01dc50af45988feac2208ff087ac-mpd.mpd ]]>
</MediaFile>
</MediaFiles>
Also running google.ima.AdsRenderingSettings(); google.ima.mimeTypes = ["application/x-mpegURL", "application/dash+xml"];
doesnt seem to fix anything either
Interesting. Maybe something is misconfigured in our IMA integration. I'll reclassify this as a bug, but I'm not sure when the team at Google would be able to look into it more deeply. Help from the community is always very welcome!
If I find a solution I will make a PR but I most likely will just have to provide a different path that re-transcodes the video with audio packed in for ads exclusively. But definitely this would be a great addition.
I have the repo on my machine so if I find a solution again Ill communicate it or make a PR.
Forked from #4792:
Though it seems that this needs to be set:
https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdsRenderingSettings#mimeTypes
@lovgrandma tried that and it did not work.
In a similar issue, https://github.com/shaka-project/shaka-player/issues/2460#issuecomment-628639656, someone concluded that IMA is trying to feed that linear playlist URL directly to an overlaid video element, without passing it to the player itself. That makes sense to me. When an ad plays, we hand control over to IMA, which owns the overlaid video element.
I don't know where to go from here. Perhaps someone who knows IMA better will have an idea on how to proceed.
I've added the ability to configure AdsRenderingSettings in https://github.com/shaka-project/shaka-player/pull/5536
I think this would help to solve this problem correctly, can you review it?
Closing due to inactivity. If this is still an issue for you or if you have further questions, the OP can ask shaka-bot to reopen it by including @shaka-bot reopen
in a comment.