My issue: ngIncluding a video source doesn't replace the video.
My page has a feed and a preview, each time I click on a post in the the feed, its preview gets injected (ngInclude) to the preview area.
It works fine for youtube video, for images and for text but when it gets to html5 videos, the same video keeps showing and it seems the source doesn't get replaced in the page.
Weirdest thing is when I enter chrome debugger and inspect the element, I see its source gets replaced with a different url, but the video in the preview doesn't change.
I even tried enabling autoplay and when I move through posts the video continues to play on smoothly.
Here are the relevant code bits:
The preview that gets ngIncluded:
<div ng-if="postInfo.Media.type == 'video'">
<video name="media" width="582" height="582" controls autoplay>
<source src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
</video>
</div>
The main page including bit:
<div id="preview-panel">
<ng-include src="htmlInclude" onload="responsiveCalc()"/>
</div>
And in my javascript when I get an event of post changed in the feed, I just re-initialize the $scope.htmlInclude
Anyone came across anything like it? Should I somehow refresh the video source? And if so how.
Thanks!
Try using ng-src instead of src in the video source tag
<source ng-src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
This lets angular know that the src will be replaced and to fetch the result
What ended up solving this was removing the source tag inside the video tag and changing directly the 'src' attribute of the video.
Came across this: http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-source-element
and from there it was pretty obvious.
so my html now looks like this:
<video name="media" width="582" height="582" controls autoplay src="{{postInfo.Media.videoStandardResolution}}">
Your browser does not support the video tag.
</video>
Related
Very important i don't have a img in api. I need to set preview thumbnail in video.
<video style="object-fit: contain;" width="100%" height="100%" controls preload="metadata"
[poster]="indexOfSelectedExercise.exercise?.fullVideoUrl" loop>
<source [src]="indexOfSelectedExercise.exercise?.fullVideoUrl" type="video/mp4" />
</video>
fullVideoUrl: "https://www.url.com/images/Screen Recording 2020-12-01 at 19.01.52.mov"
this is example of url
If you don’t have an image, then don’t specify poster, that does not make sense. (This expects an image format, so just giving it your video file URL, is pointless.)
You can only set preload to auto then, hope that the browser starts loading the video, and will use the first frame to present a preview once it is available.
(That this might come with traffic/bandwidth and maybe even performance issues, if this was used for large videos, or multiple videos on a page, should be clear.)
I'm making a custom scrub bar in HTML video player. I'm creating a HTML5 video player and take a currentTime from video and it is working good, but seting currentTime after moving a scrub bar dose not working.
Firstly, I want write I've tried several possiblity to resolve this problem. I disable autoplay in video and other things, what can be.
But, one thing puzzles me. I can not have a directly URL to the video, I have a URL to JSP code on the server, and this code return to me this file. What can be a problem with it? Because, if I downloaded this movie file and set URL to directly to this movie file - with extension .mp4 - all starts working good.
Maybe it's problem with it I can not have a directly url to movie file?
I don't have any ideas to resolve this porblem. I'm counting on your help
if the video stored as an .mp4 or .ogg or .webm video file format, It would play. Here is how your html may look like.
<video controls preload="metadata">
<source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
<source src="http://www.example.com/waterfall-video.ogg" type="video/ogg">
Video not supported.
</video>
I scraped some videos, and displayed them with iframes. That works well, however, I am now looking for a way to control these videos on my react app.
What i mean by control is for instance: pause, play, currentTime in video...etc.
I have tried several things so far.
html5 tags, but it does not work mp4 video link that I have.
A few packages, like jplayer or player.js.
I am pretty sure I can achieve my goal, I guess I just need to find the right tool.
EDIT: Here is a example of my code with video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="https://openload.co/embed/myvideo" type="video/mp4"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
Take a look at video.js. It will give you a complete control over your video playback. Take a look at their advanced examples.
Also, you don't need iframes to work with videos. If that is a design decision then it's fine but you can do video embeds without iframes.
To control video player instance via js refer to following
JS
var myPlayer = videojs('example_video_1');
HTML
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video>
Then you can control the player instance like following
myPlayer.play();
myPlayer.pause();
myPlayer.currentTime(120);
Please look at the player API in the following link
https://docs.videojs.com/docs/api/player.html
Please look at react component implementation in the following link
https://docs.videojs.com/tutorial-react.html
I am trying to build a feature on my web application that pulls the preview url from Spotify's API, and play the preview when the user clicks on the audio controls. I am able to save the correct URL in the source, but the song does not play. I looked at the MDN Docs, but still could not get it to work. Here is a snippet of my code in JSX:
<div className="audio-container">
<audio controls="controls">
<source src={this.props.songs[2].href} type="audio"/>
</audio>
<p className="font-style">{this.props.songs[2].name}</p>
</div>
I do not receive any errors. Is there anything obvious I am missing? Thank you in advanced!
This should work if you use type="audio/mpeg"
Working example below:
<audio controls="controls">
<source src="https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9?cid=null" type="audio/mpeg"/>
</audio>
For anybody who may find this useful later, I got the audio to work by removing the source tag and putting the preview url directly in the audio tag. Example:
<audio controls src="..."></audio>
I have a parrallax slider, I have put just image and description on slider, and I want to add a video, this is my code:
{ <div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Vidéo PUB</h2>
<p>loading</p> <!--wanna put the video here -->
</div>
<div class="da-slide">
<h2>Affréteurs</h2>
<p></p>
<div class="da-img"><img src="" alt="" /></div>
</div> }
My problem is the video is static.
I'm currently using this slider:
Yii2 Da-Slider
I want to:
Add it to the first slide
Set it so it autoplays
After the video finishes playing I want the slider to automatically resume and move to the next slide.
How can I do this?
I would recommend setting up a YouTube account to host your video on.
If the site is popular then it offloads the strain of serving the video file over to YouTube's fast, dedicated servers.
Once you have got your YouTube video uploaded you can add it to the slide by clicking the Share button beneath the video and then clicking Embed. This will give you a snippet of code like this which you can use in your slider code above:
<iframe width="560" height="315" src="https://www.youtube.com/embed/_dJCLaoBZvM?rel=0" frameborder="0" allowfullscreen></iframe>
Notice the rel=0 on the end. That stops it suggesting other videos once yours has finished playing which makes the whole thing more professional. You can also add autoplay=1 if you want it to start playing straight away. There are also more advanced integrations that you can do where you control the chrome of the video player (the skin around the edge).
I've done this before with parallax and it comes out looking amazing.
I prefer this method to a service like Youtube or Vimeo because you have more control and be able to style it how you want more effectively.
You want to get your video in mp4 and ogg format. You can do this with VLC media player. It's free.
Then I used the html5 <video> tag (Link Here). here is a sample. You will want to style for position, etc... in your CSS.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>