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.
Related
What is the bestpractice, when I need to have SVG images with SVG hovers with fallbacks?
I mean SVG images with PNG fallbacks (normal, reaponsive 2x, 3x), and change them on hover to other SVG images with PNG fallbacks?
Is it better to use <img /> or <picture> + <source /> + <img /> tag with jQuery (or vanilla, but I already use jQuery), or to have it all in CSS as backgrounds? If jQuery, does it mean swapping srcsets? If CSS, how do I best include #2x and #3x image versions?
Also, how does the used method affect preloading of the hovers? It would surely be much better without blinking.
So far I have this, I need to change them on hover to 1hov.svg, 1hov.png, 1hov#2x.png, 1hov#3x.png
<a href="#">
<picture>
<source type="image/svg+xml" srcset="logos/1.svg">
<img src="logos/1.png" srcset="logos/1#2x.png 2x, logos/1#3x.png 3x" alt="logo">
</picture>
</a>
Here is a HTML + jQuery solution I found. It swaps the src and sourcesets to their hover alternatives. Includes the hovers preloading.
HTML
<a href="#" target="_blank">
<picture>
<source type="image/svg+xml" srcset="logos/1.svg" data-swap-srcset="logos/1hov.svg">
<img src="logos/1.png" data-swap-src="logos/1hov.png"
srcset="logos/1#2x.png 2x, logos/1#3x.png 3x" data-swap-srcset="logos/1hov#2x.png 2x, logos/1hov#3x.png 3x" alt="logo">
</picture>
</a>
jQuery
//preload hovers
$("source[data-swap-src]").each(function(){
$('<img/>')[0].src = $(this).attr("data-swap-src");
});
$("img[data-swap-src]").each(function(){
$('<img/>')[0].src = $(this).attr("data-swap-src");
$('<img/>')[0].srcset = $(this).attr("data-swap-srcset");
});
$("a").hover(function(){
var newone = $(this).find("img").attr("data-swap-src");
$(this).find("img").attr("data-swap-src", $(this).find("img").attr("src"));
$(this).find("img").attr("src", newone);
newone = $(this).find("img").attr("data-swap-srcset");
$(this).find("img").attr("data-swap-srcset", $(this).find("img").attr("srcset"));
$(this).find("img").attr("srcset", newone);
newone = $(this).find("source").attr("data-swap-srcset");
$(this).find("source").attr("data-swap-srcset", $(this).find("source").attr("srcset"));
$(this).find("source").attr("srcset", newone);
}
);
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 used this in a head:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mediaelementjs.com/js/mejs-2.13.1/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://mediaelementjs.com/js/mejs-2.13.1/mediaelementplayer.min.css" />
This code in base javascript file:
$('video').mediaelementplayer({
success: function(media, node, player) {
$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
}
});
And this in body section:
<video width="640" height="360" id="player1">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
And both, volume manager and fullscreen just doesn't work... Does anyone have same problem or know what's the deal?
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);