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>
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)
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
I am using the code snippet from video for everybody to embed a video in my site. The snippet basically guarantees more or less that the user will be able to see the video from any device. Here is my html:
<div class="intermitent-video-container">
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
To control the sizing & aspect ratio of this video for responsive layout I have the following Javascript:
function resizeVideo() {
var videoWidth = jQuery(".intermitent-video-container").width();
var videoHeight = videoWidth * 0.666;
jQuery(".intermitent-video-container").css('height',videoHeight);
};
resizeVideo();
jQuery(window).resize(resizeVideo);
The snippet above works exactly as I want except for when the video fallback goes to the flash version of the video. When I load the page in Safari 5.1.7 which uses flash for example the video will size exactly how I want it using the code snippet above on load but not on window resize. Is this a limitation to flash or am I doing something wrong?
Adding css for video tag
video{
width: 100%;
height: auto;
}
And you absolutely sure intermitent-video-container have responsive.
Note: Dont forget <meta name="viewport" content="width=device-width, initial-scale=1">in your head HTML
I am trying to have a page with embedded video that dynamically will change the source when a link below the video frame is clicked. The source videos are on my host server.
i.e. this pic illustrates it:
I came across this page, which seems to have the answer, but I tried it and it didn't work. Following the example, I pasted the css & javascript in the and the necessary html in the body. I updated all the references to my urls and tried to keep file names the same as the example for testing.
Below is what I tried.
Can someone point out my errors, or provide a more elegant way of doing this? Basically dynamically change embedded video when link is clicked and the video work in all the typical browsers, and most devices.
This is for a wordpress site, using JW Player for wordpress, (my error) instead I found this script/code is actually for Video.js
It loads the pre image but doesn't play.
As a test I tried this and it does play single video properly:
<video id="testvideo" class="video-js vjs-default-skin" width="440" height="300" controls="controls">
<source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/>
<source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/>
<source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/>
</video>
The javascript version for multiple source links
<html>
<head>
<title></title>
<style media="screen" type="text/css">
.wrap { margin:30px auto 10px; text-align:center }
.container { width:440px; height:300px; border:5px solid #ccc }
p { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
</style>
<script>
$("input[type=button]").click(function() {
var $target = "testvid_"+$(this).attr("rel");
var $content_path = "http://www.mywebsite.net/videos/";
var $vid_obj = _V_("div_video");
// hide the current loaded poster
$("img.vjs-poster").hide();
$vid_obj.ready(function() {
// hide the video UI
$("#div_video_html5_api").hide();
// and stop it from playing
$vid_obj.pause();
// assign the targeted videos to the source nodes
$("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
$("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
$("video:nth-child(1)").attr("src",$content_path+$target+".webm");
// replace the poster source
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();
// reset the UI states
$(".vjs-big-play-button").show();
$("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
// load the new sources
$vid_obj.load();
$("#div_video_html5_api").show();
});
});
$("input[rel='01']").click();
</script> </head>
<body>
<section class="container wrap">
<video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-
setup="{}">
<source src="" type="video/mp4">
<source src="" type="video/ogg">
<source src="" type="video/webm">
</video>
</section>
<div class="wrap">
<input rel="01" type="button" value="load video 1">
<input rel="02" type="button" value="load video 2">
<input rel="03" type="button" value="load video 3">
</div>
</body>
</html>
The preload image for the 1st video loads but no video, error is
"No video with supported format and MIME type found"
So I added the source for the first video in this section
setup="{}">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4" type="video/mp4">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv" type="video/ogg">
<source src="http://www.mywebsite.net/videos/videos/testvid_01.webm type="video/webm">
</video>
Result the 1st video loads but not the other linked videos.
names of the videos/png:
testvid_01.mp4, testvid_01.ogv, testvid_01.webm, testvid_01.png
testvid_02.mp4, testvid_02.ogv, testvid_02.webm, testvid_02.png
testvid_03.mp4, testvid_03.ogv, testvid_03.webm, testvid_03.png
I have tried this both in wordpress page and html page the results are the same.
I'm not sure even if this script will do what I want?
Have you tried doing it via JW Player's JavaScript API? From what I gather you can load a playlist and invoke a function that will play a video at a certain index:
playlistItem(index)
Start playback of the playlist item at the specified index.
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.