Here is my <picture> element on page:
<picture>
<source media="(max-width: 6400px)" srcset="./images/large.jpg 1024w" sizes="100vw" />
</picture>
But when I open my page in Chrome browser, I can't see any picture. Even no image is requested in devtools network panel.
I checked caniuse.com, that the Chrome 42 is support <picture> element.
So why the <picture> does't work?
According to caniuse, <picture> support is conditional on enabling experimental Web Platform features in chrome://flags
You are missing the <img> inside <picture>. Change your HTML to:
<picture>
<source media="(max-width: 6400px)"
srcset="./images/large.jpg 1024w" sizes="100vw" />
<img src="default.jpg" alt="my images" />
</picture>
Related
I've seen a bunch of threads around referencing various video embedding issues. Unfortunately I'm not in a position to serve my assets off of a CDN (or Youtube, Vimeo, etc) so have resorted to working with multiple formats. I've got .mp4, .ogg, and .swf.
I'm continuing to get an error in Firefox (Mac) regarding "no video of the requested MIME type can be found." I've added mp4 and ogg to my .htaccess file to no avail.
Which makes me think there must be something slightly wrong with my code. I've used a combination of the suggested methods I've found online. I'm hoping I've done something so obviously daft that it will stick out like a sore thumb to someone in the know.
<video width="757" height="425" controls id="player">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="757" height="425" >
<param name="src" value="video.mp4">
<param name="controller" value="true">
<embed SRC="QTMimeType.pntg" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" qtsrc="video.swf"
width="757" height="425" autoplay="false" controller="true">
</embed>
</object>
</video>
Many thanks in advance for taking a look at this. Feeling pretty stupid right now.
I've been searching for this a lot, and I think it is not possible but for being sure:
I have some MKV video files which I want to put them on my website. The problem is you can't
play them in firefox and it only works in chrome browser. I'm using html5 player(js player).
<video id="example_video_2" class="video-js vjs-default-skin" controls preload="auto" width="800" height="600" poster="<?php echo $teacher_pic ;?>" data-setup='{"example_option":true}'> <source src='<?php echo $video_url;?>' type='video/mp4' /> </video>
<script>
videojs.options.flash.swf = "video/video-js/video-js.swf"
</script>
I also tried "Video for Everybody" player but it didn't help.
So , is it related to player or not ? is it basically possible to play my videos in firefox?
Hm, could this link help you - http://www.videolan.org/doc/vlc-user-guide/en/ch07.html
If not, maybe you could try adding a type type="video/x-matroska" and the explanation is here: https://support.mozilla.org/en-US/questions/948571
Working with HTML5 within VS2010, I don't understand how the source tags aquire the path for the video. I assume it either can be Absoulute or Relative.
What I am attempting is very simple:
<video id="my_video" width="480" height="300" controls preload="none" poster="webm/art_leaf_resized.jpg">
<source src="webm/Along_the_Path.mp4" type="video/mp4" />
<source src="webm/Along the Path.webm" type="video/webm" />
<source src="webm/Along the Path.ogv" type="video/ogg" />
</video>
However, Pressing F5 in VS2010, Firefox and IE9 can not locate the video displaying an X. Chrome is able to find the video and play it.
The poster image shows correctly and isn't missing. The poster image is in the same directory as the videos?
File Directory:
A basic HTML page (HTMLPage1.htm) holds only the video element.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<video id="my_video" width="480" height="300" controls
preload="none" poster="webm/art_leaf_resized.jpg">
<source src="webm/Along_the_Path.mp4" type="video/mp4" />
<source src="webm/Along the Path.webm" type="video/webm" />
<source src="webm/Along the Path.ogv" type="video/ogg" />
</video>
</body>
</html>
Closing VS2010 and opening IE9 and dragging in the htm page, the video is able to play in IE9, Firefox, and Chrome. I believe VS2010 is doing something?
I have been working with for some time now. I believe that I am not thinking, which it probably is something very simple.
Any help would be appreciated.
Thank you,
deDogs
I agree with the people in the comments that it might be an ASP.NET Development Server issue. Try two things: Publish the site to a legitimate local web server and try to open it from there. Also, for the dev server see if adding "~/" to the front of your urls helps anything.
After returning to this project, I found the answer to why HTML Videos were missing.
My findings can be read at my blog: Visual Studio Development Web Server, mp4 isn’t part of the set of built in known Mime types.
Thank you,
deDogs
I'd like to be able to get the src value that is actually used for a video element like the following:
<video>
<source src="foo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="foo.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="foo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
In Firefox (at least), src is defined for the source elements but not for the video element.
How can I find which source is used?
I think I've answered my own question: the currentSrc property of the video element.
This works in Firefox, Safari (and Chrome, I assume) on Windows XP SP3, at least.
UPDATE: as was pointed out to me in the comments below, there is documentation of currentSrc in the WHATWG spec.
I am trying to update a custom firefox extension that I created for some tasks at work. Basically it is a sidebar that pulls up one of our webpages in an iframe for various purposes. When moving to Firefox 3 the iframe won't appear at all.
Below is an example of the XUL files that contains extension specific code including iframe, currently with just an attempt to load google but it it won't work with anything. I can't find any mention online of changes in FF3 that would cause this. Any suggestions would be appreciated.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://customsidebar/skin/customsidebar.css" type="text/css"?>
<overlay id="customsidebar-Main" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://customsidebar/content/customsidebar.js"/>
<vbox flex="1">
<toolbar>
<vbox>
<hbox id="customsidebar_TopToolbarRow">
<toolbarbutton label="Refresh" id="customsidebar_Refresh" oncommand="customsidebar_Refresh()" />
</hbox>
<hbox>
<label control="customsidebar_StatusBox" value="Log"/>
<textbox id="customsidebar_StatusBox" multiline="true" rows="1" wrap="off" />
</hbox>
</vbox>
</toolbar>
<iframe id="customsidebar_Iframe" src="http://www.google.com" />
</vbox>
</overlay>
Here is the overlay XUL file
<?xml version="1.0"?>
<overlay id="CustomSidebar-Overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menupopup id="viewSidebarMenu">
<menuitem observes="viewCustomSidebar" />
</menupopup>
<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewCustomSidebar"
autoCheck="false"
label="CustomSidebar"
type="checkbox" group="sidebar"
sidebarurl="chrome://customersidebar/content/customersidebarMain.xul"
sidebartitle="CustomSidebar"
oncommand="toggleSidebar('viewCustomSidebar');"/>
</broadcasterset>
</overlay>
Set flex="1" on the iframe
The XUL code for sidebar is not an overlay, it's a document loaded inside an iframe (look at the Firefox main window in the DOM inspector). So the root element should be <page>, not <overlay>. This, combined with the flex="1", should make the page display.
You usually want to put type="content" or type="content-primary" on the iframe. Definitely so if you load untrusted pages in it.
I would try setting flex="1" on the iframe. If that's not working, perhaps try it with the browser element instead of iframe.