My requirement is to play a flash video (flash plugin is installed in the browser).
I have written the code by referring to how to play flash(.flv) video using video.js in chrome
But it's not working for me, the problem I observed is src tag is not getting replaced with obj (its happening in their case).
Can any one help me to understand what I am missing
My code:
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="400px" height="268" data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" type='video/x-flv'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
I tried the code from your reffered link and it worked for me in Chrome browser (Windows).
Here is a quick demo example. The source code for that demo page is below. Compare with your own page code to see what could be wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Example - Video.js </title>
<link href="http://vjs.zencdn.net/4.7/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.7/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" type='video/x-flv'>
</video>
</body>
</html>
Related
I am trying to implement a videojs player on a basic web page with the Sublime skin.
I have added the source links from the videojs website, copied the html and css from the codepen above however the default player is loading and not the skin. The web page also never stops loading, I have to hit the x button on the browser.
The console is fine and there are no errors.
I think I am missing something but I don't know what! Any help appreciated. I don't have a live version of this web page but if it helps I can put it online. Thanks!
From the Sublime Codepen:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="assets/css/video-feature.css">
<link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-sublime-skin" width="640px" height="267px"
controls preload="none" poster='https://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</body>
With the following code, a simple webpage is created with a video. However, when i change to portrait or landscape mode, the controls will be missing? Why is it like that and what can I do to resolve it?
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
</body>
</html>
Placing my video tag inside the div with data-tap-disable = true seems to work for me. It seems to be a problem with Ionic 1. And adding the following code will help my video controls to appear in android as well as web.
<div data-tap-disabled="true">
<video>
</video>
</div>
while using laravel 5 and google chrome to return the view that include a video tag
I can't get to allow video seeking I found that it could relate to not
accepting range in laravel but being quite noob I don't know what to do??
<!-- the view -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<video id="xx" class="video-js vjs-big-play-centered"
data-setup={} height="300px" width="300px"
preload="none" controls>
<source src="{{asset('videos/property.mp4#t=120')}}"
type="video/mp4" media="" >
</video>
</div>
</body>
</html>
It looks like you're using VideoJS as a video player. This is where you'll be able to handle scrubbing and jumping to a timestamp within the video. I'd check their documentation for the best way to handle that, and look at your Google Chrome dev tools console to see if there are any JavaScript errors.
There isn't currently a non-JavaScript way to start a video at a specified point, so I don't believe Laravel is the culprit here.
I have a m3u8 stream provided by Plex Media Server, and when i look on chrome or FF it works great, but when going to the page on IE9 it says:
The video could not be loaded, either because the server or network failed or because the format is not supported.
this is the code I used:
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'>
<source src="http://ip:port/video/:/transcode/universal/start?path=http%3A%2F%2Fip%3Aport%2Flibrary%2Fmetadata%2F1&fastSeek=1&X-Plex-Platform=Internet+Explorer&offset=0" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</body>
</html>
I tried adding the following plugin: https://github.com/videojs/videojs-contrib-hls
but no luck there.
Anybody got any clue what I might be doing wrong?
From the readme, videojs-contrib-hls does not support Internet Explorer < 10 unfortunately. I don't have the exact details, but it's because the tech requires more advanced and better performing javascript than is available on IE9.
btw, in your code the mime type is 'video/mp4'.
I am doing a college project whereby I have to create a website in Dreamweaver and I have to include timeline-based events on the different pages. For this I want it so when the page loads a video, for example, will play 5 seconds after followed by a sound clip.
Is there anything in Dreamweaver that will enable this? Or code in Javascript? Any help will be appreciated!
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
try this as example