Here is my code:
<div id="div6" style="position: absolute; top: 700px; left: 100px;">
<audio controls="controls; loop:true">
<source src="../media/ChealseSmile.ogg" type="audio/ogg"/>
<source src="song.mp3" type="audio/mpeg"/>
Your browser does not support the audio element.
</audio>
</div>
What do i have to add to the audio code to make it loop or autostart?
As a bonus, could someone also tell me how to make a playlist out of this code?
<audio loop="loop" />
<audio loop id="music" controls autoplay="autoplay">
<source src="music.oog" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
<embed height="2" width="2" src="engine1/granadosorienta_pianol.mp3">
</audio>
Then you can add this JS for old FF browsers if you want to support them
<!--- Fix the FF Audio Loop bug --!>
document.getElementById('music').addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
Related
I've made a svg with video display inside like this :
<video muted loop width="852" height="480" autoplay class="svg-clipped-text" style=" margin: 0 auto;
display: block;">
<source src="<?php echo get_stylesheet_directory_uri(); >/vid/video.mp4" type="video/mp4">
</video>
<svg height="0" width="0">
<clipPath id="svgTextPath">
<text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Calibri" font-size="210px" font-weight="bold">
insider.
</text>
</clipPath>
</svg>
And my css :
.svg-clipped-text {
clip-path: url(#svgTextPath);
-webkit-clip-path: url(#svgTextPath);
}
It works properly in Chrome, in Firefox but no render in Safari.
I've tried things i've found on stackoverflow but nothing seems to resolved my problem..
Thanks !
For some reason an SVG mask doesn't work directly on a video in Safari, so you'll need to create a parent div and put the class on that.
This may require a bit of wrangling on the video itself, maybe setting 100% width and height.
I am working on creating a google sheet that has a series of embedded audio tracks in the sidebar. The goal is to have people listen to various audio tracks and code the interviews in the spreadsheet.
It would be awesome if I could include a button in the spread sheet that when clicked will open the sidebar and play a specific audio track?
Thanks in advance!
Here is what I have so far:
CODE:
function onOpen(e) {
SpreadsheetApp.getUi()
.createAddonMenu()
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function onInstall(e) {
onOpen(e);
}
function showSidebar() {
var ui = HtmlService.createTemplateFromFile('Sidebar')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle(SIDEBAR_TITLE);
SpreadsheetApp.getUi().showSidebar(ui);
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<!-- Use a templated HTML printing scriptlet to import common stylesheet -->
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<div class="sidebar branding-below">
<audio id="player" controls>
<source src="https://docs.google.com/uc? export=download&id=0BzdQx2zfyYbTUmNWd3M3MF80bGs" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player" controls>
<source src="https://docs.google.com/uc? export=download&id=0BzdQx2zfyYbTVWI2V2JXRGRoMVE" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player" controls>
<source src="https://docs.google.com/uc? export=download&id=0BzdQx2zfyYbTdW9YelZfYS1vTlU" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player" controls>
<source src="https://docs.google.com/uc?export=download&id=0BzdQx2zfyYbTX1RiWE43UVhPN0E" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="sidebar-status"></div>
</div>
<div class="sidebar bottom">
<span class="gray branding-text">Docs Add-on Sound Demo</span>
</div>
</body>
</html>
Hello everyone i am trying to make a chrome extension but i am not really sure what to do! This is my code ( it is quite long) i am trying to do a randomisation when you click the icon and have video in it but i cant understand it as i have looked it up but is quite a specific question!
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: opx;
font-family: Comic Sans MS;
font-size: 13px;
}
</style>
</head>
</body>
<body>
<button onclick="myFunction()">Try again</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = Math.floor((Math.random() * 6) + 1);
document.getElementById("demo").innerHTML = x;
}
if x = 1) {
<video width="320" height="240" controls>
<source src="Clip 1.mp4" type="video/mp4">
<source src="Clip 1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
}
if x = 2) {
<video width="320" height="240" controls>
<source src="Clip 2.mp4" type="video/mp4">
<source src="Clip 2.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
}
if x = 3) {
<video width="320" height="240" controls>
<source src="Clip 3.mp4" type="video/mp4">
<source src="Clip 3.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
}
if x = 4) {
<video width="320" height="240" controls>
<source src="Clip 4.mp4" type="video/mp4">
<source src="Clip 4.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
}
if x = 5) {
<video width="320" height="240" controls>
<source src="Clip 5.mp4" type="video/mp4">
<source src="Clip 5.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
}
if x = 6) {
<video width="320" height="240" controls>
<source src="Clip 6.mp4" type="video/mp4">
<source src="Clip 6.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
}
</script>
</body>
</html>
Thanks for any replys!
Quick list of what's wrong with your code :
The syntax of your if is incorrect, you're omitting the opening parenthesis.
You are not comparing values in your if conditions, you are assigning a value. You should use == instead of =.
The block of conditions is not included in the function body, so it will be executed only once, not each time the function is called.
The content of your if is just plain HTML, instead of javascript code to modify the inner HTML of <p id="demo"></p>
I have in my code
<video id="myVideo" width="100%" controls="controls">
<source src="C:\\myVid.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
Is there away to use it in JSF2 (dynamic source)
EDITED:
I am trying to link to file on the disc of another server:
<video id="myVideo" width="100%" controls="controls">
<source src="\\myip\storage\ogg\VX-276.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
(the source is actually EL experssion).
the file is not being displayed!
When I try to open it with chrome it automatically changes it to: file://myip/storage/ogg/VX-276.ogg I tried to add in my servlet image path file:////myip//storage//ogg//VX-276.ogg however the url is changes to file:\myip\storage\ogg\VX-276.ogg which does not exist!
if I write \\\\myip\\storage\\ogg\\VX-276.ogg the file is found by not being displayed in the browser!
How do I need to write the URL to display it?
In Facelets, you can just use EL in template text.
<video id="myVideo" width="100%" controls="controls">
<source src="#{bean.videoURL}" type="video/ogg" />
</video>
You tried something like this?
<video width="300" height="200" controlis="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mpeg">
Your browser don't support video element.
</video>
...
var video = document.createElement('video');
video.src = 'video.ogg';
video.controls = true;
document.body.appendChild(video);
...
<cc.implementation>
<h:outputScript library="js" name="video.js" target="head"/>
<video src="#{cc.attrs.src}" controls="#{cc.attrs.controls}"></video>
</cc.implementation>
It`s should work, create dinamically audio and video.
could anyone please help me with a problem I have been having with a 100% - 350px layout for embedding vimeo video?
It seems like the right-margin property is getting ignored here, and the layout is overflowing to the right. I'm hoping this a simple mistake, but seems like I've tried everything. I'm running out of time.
Help would be really appreciated.
css:
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
width:100%;
height:100%;
margin-left:350px;
margin-right:350px;
}
.video {
padding:0 0 0 0;
height:100%;
width:100%;
}
html (the vimeo embed code has been reformatted for validation):
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
<div style="clear:both; height:1px; line-height:0"> </div>
</div>
</div>
EDIT:
Another solution I have tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
</body>
</html>
</head>
Edit: I'm using the solution for this type of positioning from this thread: How can I do width = 100% - 100px in CSS?
Here is a jQuery solution that works with multiple doctypes and in Chrome, Firefox and IE. IE will possibly show a blank page, but this is a Vimeo issue and can be solved by updating the IE flash plugin as discussed here and very extensively here.
I have also placed the code online.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery(function($){
$(window).load(function() {
var h = $(window).height() * 0.9;
var w = $("#content").width();
$(".video").width(w);
$(".video").height(h);
$("#content").css('visibility', 'visible');
});
});
</script>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
</object>
</div>
</div>
</body>
</html>
The width of an element does not necessarily prevent elements contained within it from overflowing that element.
If you wish things outside your DIV not to display, set its overflow to hidden: overflow: hidden.
I'm not even sure if I'm understanding your issue properly, to be honest. A clarification of what you're actually hoping to achieve might be helpful if I'm complete misreading you.
EDIT BELOW
Your approach is a bit strange, try this:
<div id="container">
<object> ... </object>
</div>
<style>
#container { position: absolute; right: 5px; }
</style>
Additionally, you're trying to size the video with CSS -- CSS isn't going to have any effect on an object. If you were to change, say, to video { width: 50px; } it would not make your video 50px wide.
Thankyou very much Erik and littlegreen. I have found the problem. It seems that you can't use a DOCTYPE if you want to do this. I just took out the Doctype and xmlns it worked. Wierd but effective.
In order to make the video smaller to stop at the right hand side of the screen (fit to the screen), you'll have to drop some of the 100% attributes and make a few more edits. Here's the new CSS and HTML.
CSS
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:90%;
}
HTML
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
EDIT As Emile rightly pointed out, for some reason this only works if you don't set a DOCTYPE for your document. Otherwise it works in Chrome, but Firefox shows a blank screen. After some testing I concluded that this has to do with the percentage widths given for the video object. Firefox doesn't support that.
As Vimeo (unlike YouTube) doesn't allow URL parameters to be passed for determining the video size, and percentage widths apparently have quirks, my only other suggestion would be to specify a fixed width and height on the video object (like on this page, see the page source), set the visibility of the content DIV to invisible, use a Javascript or jQuery function to determine the page width, change the width/height attributes of the OBJECT tag accordingly, and set the object to visible again. It's not very neat, but it'll probably work, and it would be independent of doctype.
EDIT I have implemented this solution, and it works in all browsers. See my separate new answer about it.