I wrote code to insert subtitles in the video
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>name</title>
<link rel = "stylesheet" href = "skript/video-js.min.css" />
<script src = "skript/video.min.js"> </script>
</head>
<body>
<video
class="video-js"
controls
preload="auto"
width="640"
height="264"
data-setup='{}'>
<source src="1.mp4" type="video/mp4">
<track label="rus" kind="subtitles" srclang="ru" src="sub/rus.vtt"/>
<track label="eng" kind="subtitles" srclang="en" src="sub/eng.vtt"/>
</video>
</body>
</html>
But it does not work with browsers Opera, Chrome
Is there any way to fix this?
Did you try to embed vtt/subtitles files in m3u8 package? It works with all browsers.
Related
I'm trying set up Vasts in Videojs but can't make it work!
My code looks like that.
What i make wrong?
The player works but does not display ads.
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
<!-- videojs-vast-vpaid -->
<link href="https://cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs.vast.vpaid.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/MailOnline/videojs-vast-vpaid/master/bin/videojs_5.vast.vpaid.min.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
</head>
<body>
<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls=""
data-setup='fluid:true {
"plugins": {
"vastClient": {
"adTagUrl": "MY VAST TAG",
"adsCancelTimeout": 3000,
"adsEnabled": true,
"preferredTech":"html5",
"vpaidFlashLoaderPath": "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true"
}
}}'
poster="="
preload="auto"
width='593'
height='364'
>
<source src="/cdn3.viblast.com/streams/hls/airshow/playlist.m3u8" type="video/mp4">
</video>
</body>
The value of your data-setup is not a valid JSON string, so the plugin would not be initialised. That said the Mailonline plugin has not been updated in many years and is unlikely to work with modern Video.js versions. You might have a better experience using something more up to date - e.g. https://github.com/googleads/videojs-ima
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
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.
Really don't know what's wrong with my code! I'm tryng to attach the end event to my player by i get this error in my firefox console:
"TypeError: this.addEvent is not a function"
I tried in so many way, but coudnt solve this problem!
<!DOCTYPE html>
<html>
<head>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>_V_.options.flash.swf = "video-js.swf";</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="400" height="500" data-setup='{}'
poster="http://video-js.zencoder.com/oceans-clip.png">
<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" />
</video>
<script>
var myPlayer = videojs("example_video_1");
videojs("example_video_1").ready(function(){
var myPlayer = this;
var videoEnd = function(){
console.log('ended')
};
myPlayer.addEvent("ended", videoEnd);
});
</script>
</body>
</html>
Can u help me please?
thanks a lot
video.js has recently been updated to version 4 and some things in the API have changed. You'll need to use myPlayer.on("ended", videoEnd);
API docs: https://github.com/videojs/video.js/blob/master/docs/api/vjs.Player.md
I am evaluating video.js flash fallback capabilities for live streaming.
I can stream using either RTMP or Adobe HTTP Dynamic Streaming.
Hovewer, nonne of the options seems to be supported,
here is my demo set up
<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://mysite.com:1935/live/android.stream/manifest.f4m" type="video/mp4" />
<source src="rtmp://mysite.com/live" type="video/mp4" />
<source src="http://mysite.com:1935/live/android.stream/playlist.m3u8" type='video/mp4' />
here is what I see in the firebug console
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://mysite.com:1935/live/android.stream/manifest.f4m failed.
Specified "type" attribute of "video/mp4" is not supported. Load of media resource rtmp://mysite.com/live failed.
I went through the source code of the video.js (both JavaScript and ActionScript) and couldn't find any support for manifest files.
That is a feature I would also like to see...
Rtmp is now supported in video.js an example can be seen by using there already packaged file or this:
<!DOCTYPE html>
<html>
<head>
<title>Video.js</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="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" data-setup='{ "techOrder": ["flash"] }'>
<!-- Stream testing -->
<source src="rtmp://rtmp.jim.stream.vmmacdn.be/vmma-jim-rtmplive-live/jim" type='rtmp/mp4'>
</video>
<p>Source from: http://support.akamai.com/flash/</p>
</body>
</html>
Hope this helps anyone currently stuck I know this has been dead for awhile.