I have an interesting issue that I can not seem to figure out. I am using a company to create a website for me and in their templates, they will allow me access to CSS but not to the HTML or Jquery. I need to figure out a way to change the muted too unmuted or be able to remove it.
<video style="height:100%;" loop="" muted="" autoplay="" poster="https://removed from code" playsinline="">
</video>
I can only use css to fix this, any ideas?
<video id="myVideo" src="video.mp4" controls replay autoplay></video>
Related
I have a page where I need to display videos with different extensions.
Example: .mp4, .wmv
<video width="100%" controls>
<source data-ng-src="{{video.url}}" type="video/*">
Your browser does not support this video.
</video>
I just put a star but it is not playing my video.Showing an empty screen.Can anyone please suggest me help.Thanks.
In case you need it to support multiple types of videos, you must add multiple source of those videos. The browser picks the appropriate one to play.
And moreover, your code doesn't contain the src attribute.
<video width="100%" controls>
<source src="http://www.educationalquestions.com/video/ELL_PART_5_768k.wmv" type="video/wmv">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I'm using simplest html5 audio element like this
<audio controls="controls" preload="auto">
<source src="Happy_Boy_End_Theme.ogg" type="audio/ogg" />
<source src="podcasts/Happy_Boy_End_Theme.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
this result:
I want to
1) change the height of the control - tried these options nothing worked:
<audio controls="controls" preload="auto" height="350px">
<audio controls="controls" preload="auto" style="height: 350px;">
<audio controls="controls" preload="auto" style="height: 50%;">
2) Want to change its built in blue color sliders to red - without "building" my own player.
Sorry, in WinJS is an HTML5 control and currently there is no way to style by using CSS. Instead if you need a custom styled audio player, you could implement it by writing JavaScript code, or use some 3rd party library.
Some styling can be achieved with javascript. See https://serversideup.net/style-the-html-5-audio-element/ for details
I have a video that I am trying to position over a section on a website. On my test server the position is perfect but when I upload my new file to the online server the video stays centered and below all the other info on the site. How do I code this so the index1 file displays the video like my test server.
The code on my test server is:
<div class="#main_video" id="main_video">
<video width="460" height="260" controls>
<source src="include/promo_2012.ogv" type="video/ogg">
<source src="include/promo_2012.mp4" type="video/mp4">
</video>
</div>
I selected the div and positioned it at:
Relative<br/>
Top: -414<br/>
Left: -266
Any help would be greatly appreciated.
-Josh
Try,
#main_video{
float:left;
}
This should put it to the left. Here's a live example: http://jsfiddle.net/S6mmD/
And by the way, classes are used in HTML like so: <div class='red'> and in CSS: .red{color:#f00;}
ids are styled in CSS with the pound sign # like above.
I'm looking to remove the controls from a JS player that I have embedded on a site. The idea is to have the video autoplay with no controls.. Here is my code:
<video id="Splash1" class="video-js vjs-default-skin"
controls="off" autoplay preload="auto" width="1280" height=""
="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="movie/Splash1.mp4" type='video/mp4' />
<source src="movie/Splash1.webm" type='video/webm' />
<source src="movie/Splash1.ogv" type='video/ogg' />
</video>
I was following the instructions and I removed just controls - but then the autoplay and video does not work. However, if I put back in controls the autoplay works but I have the controller playing along the bottom.
Any tips on how to get rid of the controller? Thanks so much in advance!
Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?
I do not understand if it is possible or not, I can't find anything other than this article but it seem uses Javascript.
I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.
HTML for the above image
<div class="video centered-content">
<a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
<video width="63%" height="60%" id="video" class="video" controls>
<source src="<?php echo base_static_url();?>media/video.mp4">
<source src="<?php echo base_static_url();?>media/video.ogv">
<source src="<?php echo base_static_url();?>media/video.webm">
</video>
</a>
</div>
Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn
To change the width of the player controls bar:
video::-webkit-media-controls-panel {
width: 40px;
}
You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
HTML5 Video Controls - make larger?
You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.
I recommend taking a look at MediaElement.js which gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.
Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics