Is there an example of using an existing video element to attach the media streams rather than creating a new one with event.stream.createMediaElement()? I presume that's possible.
Thanks.
You cannot use an existing video or audio element (i.e. one that you created outside of vline) since the element returned from createMediaElement is tied to the stream inside the browser. What you can do is have a div where you want to display the video, and replace the media element inside the div.
Related
We have used hlsJs library (ref: https://github.com/video-dev/hls.js) in Chrome browser to play HLS files.
There we have an event called Hls.Events.FRAG_LOADED which provides information about the hls fragment loaded like sequence number, start and end PTS and any custom tag attached to the fragment (ref: https://github.com/video-dev/hls.js/blob/master/docs/API.md#FRAG_LOADED)
Is there an equivalent event or api which we can listen to in ExoPlayerv2 for Android which can provide me same information about the media segment loaded?
Why I need this?
In my streaming server I am putting some custom EXT tag for each media fragment & i want to read that data when a media fragment is loaded in my player.
This is what I get from hlsJs on chrome browser for FRAG_LOADED event.
Need similar data from exoplayer
Any pointer will be helpful.
Thanks in advance.
You could try looking into the AdaptiveMediaSourceEventListener onLoadComplete method and use the DataSpec object to get both URL and Format objects which can be used to extract some data like bitrate and position of the segments. I do not know if there is an equivalent API out there for what you are looking for.
I am out after adding a video element in the template level as it is possible to add a button element like the following;
{action:button}
Is there any way of doing it like this;
{media:video}
I am building a custom template, that's why I should statically give such elements in the HTML so that user can see that there is a video element in the content (it is mandatory) and s/he will edit the source of with the desired URL.
Unfortunately video is not a valid tag.
See:: https://dev.weebly.com/create-the-html-layout-templates.html
The only real option would be to use Weebly's built-in Sections feature, which allows the user to add a video as a background (if that was your intention).
The only other options would be to have them hardcode the URL of the video, in your Theme, have them use the Video Element or point them in the direction of the App Center so they can use an app that provides the feature.
I was wondering if someone had already tried to make his own simple DASH player(and maybe has some examples/source codes) but without using dash.js repository on GITHUB , and if possible has any insights and tips on how to start with the creation/writing process?
Take a look at Building a simple MPEG-DASH streaming player:
Like described on this site following this steps should give you an idea:
Define an HTML5 video element in the HTML section of a page.
Create a MediaSource object in JavaScript.
Create a virtual URL using createObjectURL with the MediaSource object as the source.
Assign the virtual URL to the video element's src property.
Create a SourceBuffer using addSourceBuffer, with the mime type of the video you're adding.
Get the video initialization segment from the media file online and add it to the SourceBuffer with appendBuffer.
Get the segments of video data from the media file, append them to the SourceBuffer with appendBuffer.
Call the play method on the video element.
Repeat step 7 until done.
Clean up.
In the past I've used the Image Field Module to require a user to provide an image of specific dimensions and it's worked great. I like the new Media Library Picker Field and it's integration with the Image Editor module to allow for cropping and re-sizing.
What I'd like to do is use the Media Library Picker Field but require the user to crop and/or re-size the image to specific dimensions. Is there any way to configure it that way? So far, the best I've come up with is to provide some help text to the user suggesting that they re-size the image to desired dimensions.
Should I just stick with the Image Field if I must have the image meet specific dimensions or is there a better way with the Media Library Picker Field?
You can't enforce that the image is supplied with specific dimensions using the Orchard 1.7+ media processing features, however you can ensure that it is displayed with correct dimensions.
Orchard 1.7 introduces the concept of media profiles, which effectively allow you to create a bunch of image transformations, name them, and then use them arbitrarily throughout your site.
On a recent project I was given a load of customer profile pictures for a testimonial page on an Orchard site. They were supplied in a variety of different sizes, and I knew I needed at least 2 different sizes (one for the main testimonial page, and a smaller one for testimonial widgets shown on other pages).
In the Admin Dashboard, I went to Media -> Profiles and created a new Media Profile called Customer_Profile_Regular, then added a Resize filter to scale it down to 100x100px (the resize filter is quite flexible, and you can create your own filters easily by implementing the IImageFilterProvider interface).
I did the same for a second profile, Customer_Profile_Small, scaling down to 50x50.
Then, using Shape Tracing, I overrode the existing Media Library Picker field display shape, and replaced it with this:
#{
var imagesField = Model.ContentItem.Testimonial.CustomerProfile;
}
#if(imagesField.MediaParts.Any()) {
<div class="customer-profile-image">
#Display.MediaUrl(Profile: "Customer_Profile_Regular", Path: imagesField.MediaParts.First().MediaUrl)
</div>
}
For the testimonial widget, it was simply a case of creating a similar shape override, supplying the other profile name.
Now I can upload any image to my media library, and use it as a customer profile image on a testimonial. Orchard will automatically resize (or perform other operations on) the image based on the profile I tell it to use, the result of which is stored in the site's Media folder so that it is only regenerated when necessary.
I'm using the default playlist object from the JS-Spotify library and constructing a playlist.
Then I use this Code:
var playlistList = new views.List(pl);
playlistList.node.classList.add('sp-light');
$(".favAlbums").append(playlistList.node);
But for the first time when I load the page with this view the tracks don't show in the playlist DIV. The playlist DIV itself does. What could cause that? (I'm using exactly the same code at a different place where it works just perfectly)
Update:/
It seems to be a rendering issue because when I resize the Spotify application the track entries appear. But before resizing the DIV is empty in the inspector.