In my HTML for each source I wanted to use javascript to insert the correct video to the matching source as follows.
<script type="text/javascript">
var 1_video = '1.mp4';
var 2_video = '1.webm';
var 3_video = '1.ogv';
</script>
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" type="video/ogg" />
</video>
All the examples I find keeping using jquery and I don't want to use jquery or any external library.
What is the best way to do this.
I would do something like this but I want to achieve this without using HTML id="idname" tags on my video and source element.
document.getElementById('video').src = 1_video;
Thanks for reading and any help / guidance that can be given.
you try to select an object with "video" id so try to add id to your sources:
<video width="320" height="240" controls="controls">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source src="" id="source-mp4" type="video/mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source src="" id="source-webm" type="video/webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source src="" id="source-ogg" type="video/ogg" />
</video>
document.getElementById('source-mp4').src = 1_video;
document.getElementById('source-webm').src = 2_video;
document.getElementById('source-ogg').src = 2_video;
You could could have a video container, and every time you selected a new video, you could create a new element inside the container and destroy the old by using removeChild
/*Destroy current element inside the container*/
container.removeChild(element);
/*Create new element in the container*/
var element = container.createElement("VIDEO");
element.src = XYZ-video;
if you gave the video an id say equal to "webVideo" or something, you could get the id, then use query selector to target the source tag within that id.
var videoSource = document.getElementById("webVideo").querySelector("source");
videoSource[0].src = "1_video";
Then use the videoSource[0] for mp4 videoSource[1] for webm and [2] for ogg
Related
In AMP, I am unable to properly display m3u8 videos.
Here is the code before the AMP transformation:
https://pastebin.com/RAAWReyB
And after I get:
<amp-video ...>
<video>
<source type="application/vnd.apple.mpegurl" src="https://something/video.hls">
</amp-video>
The following can be used to display HLS video in AMP:
<amp-video width="480"
height="270"
poster="/img/tokyo.jpg"
layout="responsive"
controls
autoplay>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<!-- displayed if HLS is supported -->
<source type="application/vnd.apple.mpegurl" src="/video/tokyo.m3u8">
<!-- displayed if HLS is not supported -->
<source type="video/mp4" src="/video/tokyo-no-hls.mp4">
</amp-video>
For more information, see the annotated demo (simplified version).
Safari might be the only one that supports (amp-video & amp-ima-video) hls (.m3u8 video extensions) natively.
I tested with
Chrome v67.0.3396.99
Firefox v61.0.1
Safari v11.1.1
You can check if your browser supports the hls here:
https://codepen.io/kenanbalija/pen/GBgmxG
...
<amp-video width="480" height="270"
layout="fixed"
controls>
<source type="application/vnd.apple.mpegURL" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8">
<source type="video/webm" src="https://ampbyexample.com/video/tokyo.webm">
(not my custom codepen, i forgot where i forked this from)
is there any way to hide the control of media element jquery?
i only want to use the button round play.
my code like
<video width="100%" height="760" id="player2" poster="video/loader.jpg" preload="none" style="width: 100%; height: 100%;" data-mejsoptions='{"alwaysShowControls": false}'>
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="video/inspiration-1.mp4" />
<!-- WebM for Firefox 4 and Opera -->
<source type="video/webm" src="../media/echo-hereweare.webm" />
<!-- OGG for Firefox 3 -->
<source type="video/ogg" src="../media/echo-hereweare.ogv" />
<!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
<object width="100%" height="760" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="css.video/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=video/inspiration-1.mp4" />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
<img src="img/loader.jpg" width="100%" height="360" alt="Here we are" title="No video playback capabilities" />
</object>
</video>
<script>
$('audio,video').mediaelementplayer({
//mode: 'shim',
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
this code doest work for me, the controller still show up. how to get rid of it?
Start with the most simple form and add from there to see where the issue arises. Just use pure html and ensure you're using HTML5 (<!DOCTYPE html>)
<video src='video/inspiration-1.mp4' poster="video/loader.jpg" preload="none"></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
Is it possible to make video.js use the fallback flv videos as standard in IE? I can't get mp4 to work in Internet Explorer but flash works as long is there is no mp4 available.
First load the player script/css then we set up our "default" tech order. After that we use the IE Conditional comments to detect IE and set its tech order.
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
<script>
var techOrderArr = ["html5", "flash"]; // Default for everyone
</script>
<!--[if IE]><script>
techOrderArr = ["flash","html5"]; // IE specific
</script><![endif]-->
After that, setup your video as normal using the javascript initialization, but include the techOrder parameter.
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<script>
videojs("MY_VIDEO_1", {
techOrder: techOrderArr
});
</script>
I am using HTML video with flash fallback on my site but the flash doesnt seem to work in case HTML video is not supported. Do I need to include any javascript file to make this work ?
<video width="800" height="400" preload=""
onloadeddata="document.getElementById('videoLoadImg').style.display = 'none';"
poster="/admin/config/header_files/top.jpg" autoplay="">
<source src="/admin/config/header_files/top.mp4" type='video/mp4;' />
<source src="/admin/config/header_files/top.webm" type='video/webm;
codecs="vp8, vorbis"' />
<source src="/admin/config/header_files/top.ogv" type='video/ogg;
codecs="theora, vorbis"' />
<embed src='/admin/config/header_files/top.swf'
type='application/x-shockwave-flash' width='800' height='400'
allowscriptaccess='always' allowfullscreen='false'></embed>
<img src='/admin/config/header_files/cake.jpg' />
</video>
The HTML video is not working on my iMac with Safari 5.0.6.
Could it be the video is not auto played? because when I open WebKit Inspector and try
document.querySelector('video').play()
and it works. This case you could the code above to jQuery DOMReady, or add the autoplay attribute like this:
<video autobuffer autoplay>
FYI: I have Safari 5.1.2, however I believe Safari has support for HTML5 video around 4.0.