I am using one of the webrtc libraries to show video and attaching the stream received to video element. But when I inspect the video element, src attribute is missing.
<video autoplay="" id="EKA-e2RERLzhCFy8AAEd" class="videoRoom"></video>
I have couple of questions here :
Is it possible for video element to have no src attribute.
If possible, how to get src for that video
Is it possible for video element to have no src attribute.
Yes it's possible.
The library you do use probably sets the srcObject property of your videoElement.
This property allows to set the source of your video directly to a MediaStream, a MediaSource, a Blob or a File Object.
Note that FF only supports MediaStreams currently.
Example for FF (inspect the element afterward)
navigator.mediaDevices.getUserMedia({video:true}).then(s=>(vid.srcObject = s));
<video id="vid" controls></video>
And a fiddle for chrome since it requires https protocol for GUM to work.
If possible, how to get src for that video
Well, there is not really an src so I'd say not possible.
You can still call yourVideoElement.srcObject, but this will return the object to what it was set (usually a MediaStream).
If you need to record it, you can then use a MediaRecorder.
<div class="col-sm-12">
<video width="400" controls>
<source src="http://ia800803.us.archive.org/17/items/MickeyMouse-RunawayTrain/Film-42.mp4" type="video/mp4">
</video>
</div>
In src place the video url you want
<video width="400" controls>
<source src="" type="video/mp4">
</video>
Related
I need to show multiple instances of a video tag on one page. I'm trying to find a way to read video buffers and use MediaStream to append the buffers to another video tag. But it seems there is no such an api in video tag.
Is there any way to do this? please let me know if you know any solutions.
NOTE: I don't want to use canvas to put image data on it because of performance issues in safari.
"I need to show multiple instances of a video tag on one page...
But it seems there is no such an api in video tag."
You can try using the CaptureStream API (intro). You can also check options in the documentation.
CaptureStream should not care if your video input is a media file or some appended buffers.
Note: In these stream copies...
autoplay is needed for auto-displaying pixels,
muted avoids hearing multiple audios.
This code is tested as working in Chrome (Windows), so let's hope it works in Safari (Apple) too:
<!DOCTYPE html>
<html>
<body>
<video id="vid_01" width="320" height="240" controls>
<source src="myfile.mp4" type="video/mp4">
</video>
<video id="vid_02" width="320" height="240" muted autoplay>
</video>
<video id="vid_03" width="320" height="240" muted autoplay>
</video>
<script>
var streamCopy;
var vid1 = document.getElementById('vid_01');
var vid2 = document.getElementById('vid_02');
var vid3 = document.getElementById('vid_03');
//# check if video is ready to be copied...
vid1.addEventListener("loadeddata", copyVidStream );
function copyVidStream ()
{
if (vid1.readyState >= 3 ) //if ready then copy stream
{
streamCopy = vid1.captureStream();
vid2.srcObject = streamCopy;
vid3.srcObject = streamCopy;
}
}
</script>
</body>
</html>
How can I embed a video from vk.com and specify the time on which the video should start (eg: the video should start from the middle, or from second 5), and to hide the controls, like on YouTube?
A simple embed looks like:
<iframe src="//vk.com/video_ext.php?oid=162756656&id=171388096&hash=b82cc24232fe7f9f&hd=2" width="853" height="480" frameborder="0" allowfullscreen></iframe>
To make it autoplay I solved by adding &autoplay=1 at the end of the src url.
I tried to find an API or something else for the embed but I am unable to find it. Thank you!
It seems like vk.com used to support &t=1m14s parameter when it was using Flash video player, but they don't have such functionality since they moved to HTML player.
So the answer is - there is no way to do it.
To set a video's current time we use .currentTime . In order to do this first you need the url of the actual video. To do so click into your iframe src then get the video src up to .mp4 which is https://cs634504.vk.me/u162756656/videos/6c35b838ac.480.mp4 .
var mediaElement = document.getElementById("video");
mediaElement.currentTime = 122;
<video id="video" controls>
<source src="https://cs634504.vk.me/u162756656/videos/6c35b838ac.480.mp4" type="video/mp4">
</video>
I have video embedded in a webpage.
I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.
I've tried
adding webkit-playsinline
<video width="400" controls webkit-playsinline>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I've tried added in JSFiddle <-- Please View it use your Phone/Tablet
Any hints ?
You have to set the following in Obj C as well.
webview.allowsInlineMediaPlayback = YES;
Your existing attribute is right like below.
<video id="player" width="480" height="320" webkit-playsinline>
Other - Use HTML5 FullScreen API
http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Below are the Webkit Fullscreen properties to play around.
document.webkitCurrentFullScreenElement
document.webkitCancelFullScreen
document.webkitFullScreenKeyboardInputAllowed
document.webkitIsFullScreen
I am trying to change the source of a <video>, but it is not playing the new video:
<body onload="setvid()">
<div id="container">
<video width="640" height="360" autoplay loop>
<source id="srcc" src="" type="video/mp4">
</video>
</div>
<script type="text/javascript">
function setvid() {
document.getElementById("srcc").src = "vid" + Math.floor(Math.random() * 10) + ".mp4";
}
</script>
</body>
Any suggestions?
From the specification (emphasis mine):
The src attribute gives the address of the media resource. The value must be a valid non-empty URL potentially surrounded by spaces. This attribute must be present.
Note: Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.
So it seems you should assign the new source to the <video> element instead.
<div id="container">
<video width="640" height="360" autoplay loop />
</div>
<script type="text/javascript">
function setvid() {
document.querySelector('video').src = "...";
}
</script>
Like Felix said, you shouldn't try to change the src attribute of a source element, according to this spec note.
Instead, lets say you have:
<audio>
<source src='./first-src'/>
</audio>
You can modify the media src like so:
<audio src='./second-src'/>
<source src='./first-src'/>
</audio>
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me