HTML5 Video tag fallback is not working for me. Embed tag without Video tag works fine.
Below code doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<video width="549" height="309" controls autoplay>
<source src="small.3gp" type="video/3gpp">
<div>
No Movie
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</div>
</video>
</body>
</html>
Below code works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</body>
</html>
I need to create a video player which can run any kind of video file and fallback to quick time if its not supported by native. Mp4 format works fine as its supported in native browser (Chrome , IE and FF also as decoder is already there).
I am testing fallback for other than Mp4. like 3gp in this case.
I have seen code examples of Video for everybody, videojs, diveintohtml5/video, but not able to execute the the above code.
Any help would be appreciated.
Related
I'm coding using Vue JS technology and I'm trying to load the favicon but it won't show up. I tried to look for other documentation about it but can't find one. I'm a beginner in this technology hope someone help. Thanks!
Here is my code in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<title>Hello World</title>
</head>
<body>
<noscript>
<strong>
We're sorry but codesandbox doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Please check the attached image there is the code as well.
In Vuejs, your favicon.ico should be in either public or assets folder.
To access images from assets folder in vue one would do :src="require('#/assets/images/favicon.ico')"
To access images from public folder in vue one would do :src="./static/images/favicon.ico"
I hope this helps!!
I am using Safari Version 12.0.2 (13606.3.4.1.4) and I have very simple page like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
</head>
<body>
Hello There
</body>
</html>
This shows when I reload the page the asset is loading from the cache which is expected.
Changing the Script tag to a URL which redirects to this asset because there are different variations of this script and based on the context right script will be loaded. So when I change script tag from
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
To this
<script src="https://pvpsx9qpxa.execute-api.us-west-1.amazonaws.com/PROD/getAsset?marketplace=US&assetName=bundle.js"></script>
Which points to the same asset, now when I reload the page every time, the whole asset is getting loaded and it's not hitting the cache at all, Mobile Safari has the exact same issue.
In chrome and FF it works the right way and shows the redirect as well, what to do for Safari as it's a big asset and can't be freshly loaded every time.
Chrome results,
I've been trying to make this videoJS HLS work. It works perfectly when I do it in localhost but when I upload it to the server it gives me "VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video."
Here's the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
<script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>
</head>
<body>
<h1>Video</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type='application/x-mpegURL'>
</video>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
Can anyone tell me if I need to do something with the server to make this work? Thanks
Try to verify if your server has CORS activated.
Go to videojs cors documentation: https://github.com/videojs/videojs-contrib-hls
and here for test:
http://client.cors-api.appspot.com/client
I have a source code use manifest. When i run code in chorme it work. But when i run in ie 10 AppCache Fatal Error.
Code html:
<html manifest="demo.manifest">
<head>
<meta charset="utf-8" />
<meta http-equiv="EXPIRES" content="0" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
</head>
<body>
<script src="js/jquery.min.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="imgs/img_logo.gif" width="336" height="69"></p>
<p>Try opening this page, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>
And code manifest file:
CACHE MANIFEST
js/demo_time.js
imgs/img_logo.gif
Some body help me. Thank you for support.
I'm working on webpage that was built to run on IE7, and now i'm in the process of upgrading the page to run in IE11 Edge mode by default.
What i've did in the page is that i added
<!DOCTYPE html>
I also added this
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test Image Request</title>
<style type="text/css">
.auto-expand{overflow-y:visible}
</style>
</head>
Now whenever i open the page, the Emulation Panel in IE11 Developer mode says its rendering in IE7!
What did i miss?
Solved! there was <script> before <head>, moved it after <head> and now eveything works fine.