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
Related
My team and I are making a custom html video player and I'm working on a setting panel
And the first option we are mainly worried about so I'm adding first is the video quality option.
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
And now what we want to do is when the user toggles on an option it will change the video source to the source that has the quality specified by the size attribute
Image reference here
PS: We are making a video player from scratch as It is on its own built with no APIs (e.g. Video.js, JWPlayer, Plyr) We are making all the things needed from scratch with pure javascript and html... and as we're making a website for streaming, and my team and I want to make a video player made by us for the website, and "maybe" later for distribution but for now we want to make a brand new video player and were just been putting this part off as we aren't sure of the best way to do this!
Edit
Also, we want the video to pause and change the quality and pick up off where it was paused
Note that for the native video the browser will decide which <source> to show and choose the first element it supports/understands (e.g. the first supported video file format): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
To circumvent that and force the browser to show a certain video source url, put in only one <source> element and manipulate the source property with javascript.
To pause and play the video in the native HTML5 video player you may use the API of the HTMLMediaElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
It has the play and pause functions you're looking for.
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 don't understand why HTML5 fallback works properly but Video.js doesn't.
I have made two simple examples to illustrate that I'm trying to explain. If one source fails, the player should switch to the next available source.
Base Layout
<video class="video-js vjs-default-skin"
height="300"
width="600"
controls autoplay>
<source src="http://vjs.zencdn.net/v/oceans_FAILS.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
Example 1 - HTML5
http://output.jsbin.com/xadihumoka/3
It follows perfectly the W3C HTML5 spec of "The resource selection algorithm for a media element".
Example 2 - Video.js
http://output.jsbin.com/koracuboyo/1
Get errored and doesn't recover from error state.
I cannot find any documentation about this problem on video.js github page or the resource selection algorithm for a media element implemented by video.js. I know they use a tech order for determine the source to play, but they only consider 1 working¿? source per tech.
I'm asking here instead of in the video.js issue tracking system(github) because they close by default the non-core issues.
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>
There is a simple link
01. The Name of Track
How to play the mp3 file, when user clicks on link? Please help me to find some simple and effective solution.
Thank you.
Thank you for help.
I choosed this solution http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ as the most appropriate in my case.
Use HTML5 <audio>
<audio controls id="linkAudio">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
</script>
Note: As audio is an HTML5 tag, it won't support old browsers, so be
sure before you use it..
Or take a look at this article
Many browsers today (like Chrome and Firefox) will not play MP3 or MP4 files, due to IP restrictions. You can either transcode your files to compatible alternatives, like Ogg, or you'll have to rely on plugins to get universal browser support. One very good option is Soundmanager, which I'm using in a project where transcoding is not an option. It uses HTML 5 playback when it can, but falls back to an invisible Flash movie if the file type is not supported by the chosen browser. It's extremely flexible, but it has a bit of a learning curve. The demos are fantastic though, and provide several types of players that you can probably just drop in to whatever your interface is.
You have several options, you could use the html5 audio tag, which would create a small player that would allow you to play the audio:
<audio controls width="100" height="100">
<source src="some.mp3" type="audio/mp3">
<!-- Fallback for older browsers -->
Your browser doesn't support html5 audio
</audio>
You could also use the embed html tag:
<embed src="some.mp3" autostart="false" id="somemp3" enablejavascript="yes">
Then run the following javascript upon clicking the link:
var snd = document.getElementById(somemp3);
snd.play();
Or you could use the embed method for browsers that don't support html5 audio, by putting the above code within the audio tags, and it will show up only if the browser doesn't recognize the audio tag
You could also use a flash audio player.
Play Audio
<audio>
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
Using jQuery:
$("a").click(function() {
$("audio").play();
});