I'm using html5videoplayer 6.2.14 in a typo3 6.1.7 installation. The control bar doesn't appear as it should - either missing or double display (because the mouseover text like "play" appears with the image, mouseover text doesn't show up).
The plugin parameters are set to autoplay and show control bar.
http://www.alexianer-berlin-hedwigkliniken.de/index.php?id=5674
How can I correct this?
This is the code without control bar:
<div id="video_4" class="video-js vjs-default-skin vjs-paused" width="680" height="385" style="width: 680px; height: 385px;">
<video id="video_4_html5_api" class="vjs-tech" data-setup="{"techOrder":["youtube","vimeo","html5","flash"], "ytcontrols": true}" autoplay="" preload="auto">
</video>
</div>
And that's the code with double control bar:
<video id="video_4_html5_api" class="vjs-tech" data-setup="{"techOrder":["youtube","vimeo","html5","flash"], "ytcontrols": true}" autoplay="" preload="auto" src="....webm">
<div class="vjs-control-bar">
<div class="vjs-play-control vjs-control vjs-playing" role="button" aria-live="polite" tabindex="0">
<div class="vjs-control-content">
<span class="vjs-control-text">Pause</span>
</div>
</div>
</div>
Thanks for any help!
You're loading two different versions of video.js's javascript and css, and they're conflicting.
v4.9.0:
<link href="typo3conf/ext/html5videoplayer/Resources/Public/video-js-4.9.0/video-js.min.css" type="text/css" rel="stylesheet" media="screen" />
<script src="typo3conf/ext/html5videoplayer/Resources/Public/video-js-4.9.0/video.js" type="text/javascript"></script>
v3.2.0:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
You should remove the old version.
Related
I am trying to play .swf file using Videojs but getting message that media could not be loaded either the server or network failed or because the format is not supported. Here is my code:
<link href="/html/js/video/videojs/video-js-5.17.0/video-js.css" rel="stylesheet">
<script type="text/javascript" src="/html/js/video/videojs/video-js-5.17.0/video.min.js"></script>
<script>videojs.options.flash.swf = "/html/js/vendor/video-js-swf-5.3.0/dist/video-js.swf"</script>
<div style="display:block; margin-top: [[margin_top]]px; color: #fff; border:none;">
<video id="vidojs-player-swf"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="[[width]]"
height="[[height]]"
data-setup="{}">
<source src="/path/to/swf/file" type="video/x-flv"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
</div>
Is it allowed if tooltip is not having an href component?
Here is my code :
<a data-toggle="tooltip" title="Please click on map of your precise location"><i class="fi flaticon-question"></i></a>
I removed the href because if I click on the tooltip, the web goes to top of the page (on mobile screen). Is there any other best practice for this?
Does it have to be an anchor at all? You should be able to just do something along the lines of.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<i class="glyphicon glyphicon-question-sign"
data-toggle="tooltip"
data-placement="bottom"
title="Contextual help for mouse/touch users">
</i>
<span class="sr-only">Contextual Help for Screen Readers</span>
Unless you're help icon should go somewhere it probably shouldn't be an anchor. The only thing I've added is the sr-only block which will allow screen readers to read out your contextual help.
Alternatively you can make sure that the anchor doesn't move the page by attaching an event to it and preventing the default behaviour.
//untested!
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
//comment the following line out to see page move on click
$('a[data-toggle="tooltip"]').click(function(e){e.preventDefault()})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/><br/><br/>Your icon is below here to show the lack of scrolling<br/><br/><br/><br/><br/><br/><br/>Keep going...<br/><br/><br/><br/><br/><br/><br/><br/><br/>Just a little more<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#" data-toggle="tooltip"
title="Please click on map of your precise location">
<i class="glyphicon glyphicon-question-sign"></i>
</a>
video.js Hello. I'm trying to have a video autoplay when slider starts. That part is working. Problem occurs though when it loops through and comes back to the video, the video will not replay. I've tried to figure it out with a loop="true" but if I do that it just plays video over and over and then slider doesn't work. Any advice? Thanks! (I can add my code if needed)
<meta charset="utf-8">
<title>AnythingSlider Video Demo</title>
<link rel="shortcut icon" href="demos/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- Demo stuff -->
<link rel="stylesheet" href="demos/css/page.css">
<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
<script src="js/swfobject.js"></script>
<!-- Anything Slider -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
<script src="js/jquery.anythingslider.video.js"></script>
<script>
// DOM Ready
$(function(){
$('#slider')
.anythingSlider({
resizeContents : true,
autoPlay : true,
addWmodeToObject : 'opaque',
buildStartStop: false,
navigationFormatter : function(index, panel){ // Format navigation labels with text
return [][index - 1];
}
})
// Initialize video extension
// see https://developers.google.com/youtube /player_parameters?hl=en#Parameters for a list of parameters
.anythingSliderVideo({
startPanel : 1,
// video id prefix; suffix from
$.fn.anythingSliderVideo.videoIndex
videoId : 'asvideo',
// auto load YouTube api script
youtubeAutoLoad : false,
wmode: 'transparent&autoplay=1', // (hack) add autoplay code here
// see: https://developers.google.com/youtube /player_parameters#Parameters
youtubeParams: {
modestbranding : 1,
iv_load_policy : 3,
fs : 1
}
});
});
</script>
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<!-- START AnythingSlider -->
<ul id="slider">
<!-- HTML5 Video -->
<li class="panel5">
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" autoplay="true" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English">
</track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
</li>
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
</ul> <!-- END AnythingSlider -->
<br>
</div>
<br>
You can add the autoplay parameter of the <video> tag to "autoplay" instead of true. This worked for me using Anything Slider.
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.
I am having two questions with respect to this above program
The Width of the button is appearing very small
How can I change the color of the button programatically means onclick of this button I have a function?
dojo.setStyle("bid" ,"color" ,"red");
But both aren't working
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dijit.form.Button");
</script>
</head>
<body class="claro">
<div dojoType="dijit.form.Button" id="bid" style="color: green;width: 335px; font-size:12px;"></div>Save
</body>
</html>
The method you want is style, not setStyle, so use:
dojo.style("bid", "color", "red");
To make the button bigger, put some text in the div:
<div dojoType="dijit.form.Button" id="bid" style="color: green;width: 335px; font-size:12px;">Save</div>