I have a azure media player embedded in my SharePoint page.
The source to the file to be played is set dynamically through a script file.Th source files can be of wmv/mp4/mpg formats and retrived from a sharepoint video portal.
However the source is not being set or it throws some error.
Please find the code below.
HTML:
<video id="vid1" class="azuremediaplayer amp-default-skin video-responsive" autoplay controls width="100%" height="100%" poster="poster.jpg">
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
JS:
var myPlayer = amp('vid1', { /* Options */
"nativeControlsForTouch": false,
autoplay: false,
controls: true,
width: "640",
height: "400",
poster: ""
}, function() {
console.log('Good to go!');
// add an event listener
this.addEventListener('ended', function() {
console.log('Finished!');
});
}
);
myPlayer.src([{
"src": "<<URL to the source file in video portal>>",
"type": "type": "application/vnd.ms-sstr+xml"
}]);
The mime type you're using in your given code implies that you're trying to set a smoothstreaming source (application/vnd.ms-sstr+xml)
if you are setting the source as an MP4 you should use the mime type video/mp4
myPlayer.src([{ src: "YOUR_SOURCE.mp4", type: "video/mp4" }]);
you can check out this sample which plays back progressive MP4 content from the Azure Media Player samples page
Also, I'm not sure if this was a typo or not but you have "type": included in your code twice.
Please refer to https://amp.azure.net/libs/amp/latest/docs/.
Authentication token of a sharepoint videoportal file can be retreived using GetStreamingKeyAccessToken rest service.
Related
I am building a Django based web app in which I want to play an audio file from the server in the browser upon the click of a button. The file changes with the use of the app so I call a Django view through the src attribute of the audio element like so:
<audio id="audio" src="{% url 'play' 'for-sure' %}" type="audio/wav"></audio>
Here for-sure is the default filename to play. Here's the mapped view function:
def play(request, file_name):
with open(f'audio/{file_name}.wav', 'rb') as f:
response = HttpResponse(f.read(), status=206)
response['content_type'] = 'audio/wav'
return response
I also add a button to play the sound:
<input type="button" value="Play audio" onclick="play()" id="play_btn">
And the accompanying Javascript:
function play(){
var audioElement = document.getElementById("audio");
var promise = audioElement.play();
if (promise !== undefined) {
promise.then(_ => {
console.log('playing')
}).catch(error => {
console.log('playing error')
console.log(error)
console.log(error.message)
});
}
};
This works in Firefox (v68), but I keep getting DOMException: Failed to load because no supported source was found in Chromium (v76).
From what I've found it seems to be the AutoPlay prevention policy, but it should be also active in Firefox. If it is, I'm guessing it could be triggered by receiving the HTTP response by the view that wants to autoplay the audio.
I've also tried initing an AudioContext as here, and resuming it upon button click but to no avail.
What am I missing and how can I make it work?
Ok, so finally I've got it - it wasn't the AutoPlay Policy after all. Chrome doesn't support the audio element's src attribute to be the Django view's url (which responds with a HTTP Response audio file transfer). Hence Failed to load because no supported source was found.
As a solution, I switched to serving the audio files from my static directory setting the src to the static file's path. For example, the audio element init that points to the default sound now reads:
<audio id="audio" src="{% static 'annotate/audio/for-sure.wav' %}" type="audio/wav">
</audio>
I configure Advertisement through VAST tag using jwplayer like.
$(document).ready(function(){
var playerInstance = jwplayer("player1");
playerInstance.setup({
file: 'https://d150hyw1dtprld.cloudfront.net/videos/HP_VideoTest_NoPostRoll_v2_720p.mp4',
width: "100%",
displaytitle: false,
controls: false,
primary: 'flash',
mute:'false',
autostart: true,
advertising: {
client: "vast",
tag: 'http://ads.adaptv.advertising.com/a/h/DLhbzlB+8BBfoyyx+Qo7i7Bx_Mpt2nNJbie4rwz4DHkL4tzFA61JtQ==?cb=${cachebreaker}&pageUrl=${embeddingPageUrl}&description=${description}&duration=${duration}&id=${id}&keywords=${keywords}&title=${title}&url=${videourl}&eov=eov&width=${width}&height=${height}&videourl=${videourl}&duration=${duration}&br_i=ad&context=${context.homepage}&adap_uid=7924494155751153126'
}
});
});
The above SWF advertisement not played. only Primary Video (File) only plays. How can i Fix that??
It seems like there is a problem with the VAST file representing the advertisement you linked to in your code snippet—when I paste it into Google's VAST Inspector, I get this error:
(4:29:36 PM) Ad error: AdError 901: An unexpected error occurred within the VPAID creative. Refer to the inner error for more info. Caused by: Error: Error: No ad found in ad tag response
In the advertisement, there is a single <MediaFile> tag:
<MediaFiles>
<MediaFile delivery="progressive" width="400" height="300" type="application/x-shockwave-flash" apiFramework="VPAID">
<![CDATA[
http://redir.adap.tv/redir/client/VPAIDClient.swf?adTagUrl=http%3A%2F%2Fads.adaptv.advertising.com%2Fa%2Fh%2FDLhbzlB%2B8BBfoyyx%2BQo7i7Bx_Mpt2nNJbie4rwz4DHkL4tzFA61JtQ%3D%3D%3Fcb%3D%24%7Bcachebreaker%7D%26pageUrl%3D%24%7BembeddingPageUrl%7D%26description%3D%24%7Bdescription%7D%26duration%3D%24%7Bduration%7D%26id%3D%24%7Bid%7D%26keywords%3D%24%7Bkeywords%7D%26title%3D%24%7Btitle%7D%26url%3D%24%7Bvideourl%7D%26eov%3Deov%26width%3D%24%7Bwidth%7D%26height%3D%24%7Bheight%7D%26videourl%3D%24%7Bvideourl%7D%26duration%3D%24%7Bduration%7D%26br_i%3Dad%26context%3D%24%7Bcontext.homepage%7D%26adap_uid%3D7924494155751153126%26a.cluster%3D0%26a.pvt%3D0&companionId=&cpmPassback=&placementId=266469&orgId=5047&injectCompanionDummy=&pauseOnClick=&d.vw=&d.app=
]]>
</MediaFile>
</MediaFiles>
The query param adTagUrl has this as its value:
http://ads.adaptv.advertising.com/a/h/DLhbzlB+8BBfoyyx+Qo7i7Bx_Mpt2nNJbie4rwz4DHkL4tzFA61JtQ==?cb=${cachebreaker}&pageUrl=${embeddingPageUrl}&description=${description}&duration=${duration}&id=${id}&keywords=${keywords}&title=${title}&url=${videourl}&eov=eov&width=${width}&height=${height}&videourl=${videourl}&duration=${duration}&br_i=ad&context=${context.homepage}&adap_uid=7924494155751153126&a.cluster=0&a.pvt=0&companionId=&cpmPassback=&placementId=266469&orgId=5047&injectCompanionDummy=&pauseOnClick=&d.vw=&d.app=
which seems like it's circling back to the same VAST file as the one you linked to. So it really just seems like you have a bad VAST tag here.
I have JW Player embedded on our website.
The plan is to stream video only at certain times of day, with a standby video used when the stream is not connected.
At present the below code works very well if the RTMP is connected, however it stalls o the RTMP media source if the RTMP stream is not live.
Current code (can be seen i action at http://www.powerballlive.com/powerball/streamtest.html);
<script type="text/javascript" src="http://www.powerballlive.com/powerball/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="Iz4ZkMD0vBmE3ao9rJMrEK2hb2o00wjqUBMnvA==";</script>
<title>PowerBall Live: Test</title></head>
<body>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
playlist: [{
file: "http://www.powerballlive.com/powerball/jwplayer/standby.mp4"
},
{
file: "rtmp://cp310032.live.edgefcs.net/live/4ccc983a#390564"
}],
primary: "flash",
height: 360,
width: 480,
autostart: 'true',
repeat: "always"
});
</script>
</body></html>
I'm looking for a solution where the MP4 will loop until the RTMP is connected, then resume looping when it's offline.
Any support is greatly appreciated, thanks in advance!
var IsPlaying = jwplayer('myElement').getState();
setInterval(function(){
if (IsPlaying != 'PLAYING') {
$('#myElement').hide();
$('#standbyPlayer').show();
}
else {
$('#myElement').show();
$('#standbyPlayer').hide();
}
}, 1000);
That will poll your jwplayer every 1000ms and show the standby player if the main player is not playing. Do you know how to use jQuery to manipulate DOM elements? I can post more info if necessary. Thanks.
I am trying to get the jwplayer with mpeg dash support working but am having some trouble with that.
I am encountering the following error when the page loads :
Error loading player: No playable sources found.
The jwplayer player code is as follows:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',
dash: true,
width: 640,
height: 360
});
</script>
I will appreciate any feedback to help me fix this problem.
You need a div in there which anchors the location for the player:
<div id="myElement"></div>
with your script and the div element mentioned above it plays fine for me using JWPlayer7:
<div id="myElement"></div><script type="text/javascript">var playerInstance = jwplayer("myElement");playerInstance.setup({file: 'http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd',dash: true,width: 640,height: 360});</script>
I tried playing DASH stream (http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd) in Chrome Canary browser using online JWPlayer test player which is provided and hosted by JWPlayer themselves and stream did work for me without any issue.
My app having JW player and I am sharing one video (embedded code or link) on Facebook so Facebook will play that video with JW player.
I shared one video using JM player, video posted successfully on Facebook but not working.
Please suggest me how should I do this?
We have implemented this with the following reference
http://support.jwplayer.com/customer/portal/articles/1409823-social-sharing-overlay
<script type="text/javascript">
jwplayer("container").setup({
file: "/uploads/video.mp4",
sharing: {
code: encodeURI("<iframe src='http://example.com/embed/12345.html' />"),
link: "http://example.com/page/12345/"
}
});
</script>
jwplayer("container").setup({
playlist: [{
file: "/videos/12345.mp4",
mediaid: "12345"
},{
file: "/videos/67890.mp4",
mediaid: "67890"
}],
sharing: {
code: encodeURI("<iframe src='http://example.com/embed/MEDIAID.html' />"),
link: "http://example.com/page/MEDIAID/"
}
});
It will share link on social media, but not able to play video with custom player.
Basically need to create a custom player like YouTube.