I have an online movie web. I use videojs to play video and set captions as subtitle. But its weekness is that someone will easyly stoles the subtitle file. As the code is:
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="700" height="420" poster="http://i.imgur.com/wiXKfA1.png" data-setup="{}">
<source src="videos/338.mp4" type='video/mp4' />
<track src='subs/338.vtt' srclang='vi' label='Viet-sub' default></track>
<track src="subs/338eng.vtt" srclang="eng" label="Eng-sub"></track>
<track kind="captions" src="subs/338.vtt" srclang="vi" label="Vi"></track>
</video>
They just need to viesource and get the vtt file.
I don't want someone stoles the subtitle file, so that I want to use xml file to describe this subtitle. The xml file is as this link: http://naruto.crazy-sub.com/input.xml
How can I use this xml file instead of the vtt file for my videos? Anyone have any ideas? Thank you.
Related
It seems that just adding the remote file in the src property is not enough for Chrome.
<video width="720" height="400" >
<source src="http://mysite/master.m3u8" type="video/mp4" />
</video>
Try type="application/x-mpegURL" on the source, or
<video width="720" height="400" src="http://mysite/master.m3u8"></video>
When trying to play/test a video (MP4) on my web page, I select the play button and see this every time:
Video Could Not Be Decoded
That shows up after about 7 seconds of play in IE11, yet it plays fine in Chrome and Firefox. Any ideas?
Environment:
video-js player-v4.11.4, with a flowplayer fallback
IE11
Windows 7 PC
Here is the player code:
<video id="_1200k.mp4" class="video-js vjs-default-skin"
preload="none" width="445" height="340" controls
poster="[var.thumb_file]" data-setup='{techOrder: [‘flash’,’html5’}'>
<source src="http://..........s3.amazonaws.com/[var.video_play]" type='video/mp4' />
<object class="vjs-flash-fallback" width="445" height="340" type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="/flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["/[var.thumb_file]", {"url": "http://.........s3.amazonaws.com/ [var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
Although I haven't personally tested this, I feel very confident saying that there's very little chance that the Flowplayer fallback works as a drop-in replacement for the Video.js swf. Why are you doing this in the first place, when Video.js has its own fallback?
I'd be surprised if you weren't seeing other issues as well. For instance, the example you provided has invalid JSON in the data-setup attr, so that should throw a JSON parse error.
So back to the original question about Flash fallbacks...if you're attempting to play an mp4 back in IE11, why are you forcing Flash in the first place? IE11 supports h264 natively, so a Flash fallback is unnecessary.
Altogether, your <video> tag should look something like this:
<video id="_1200k.mp4" class="video-js vjs-default-skin" preload="none"
width="445" height="340" controls poster="..." data-setup='{}'>
<source src=".../movie.mp4" type="video/mp4"></source>
</video>
I am using VideoJS to play the video and it plays well without any issue.
But the video keeps on looping which I don't want. It does not stop after playing once. I have not provided any options for the video to play in loop; but it does.
I even tried adding data-setup with loop as false.
<video id="video5" class="video-js vjs-default-skin" controls preload="none" width="500" height="400" data-setup='{ "loop" : "false" }' >
<source src="http://localhost/~~video(4).mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2" />
</video>
I am using version 4.5.2 which is the latest build.
What I am doing wrong?
Is there a way to hide the default play button in ios/android mobile devices for HTML video?
I am using video.js with the following html
<video id="battery_video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="720" height="480"
poster="/videoLibrary/data/thumbnails/Battery.jpg"
data-setup='{"example_option":true}'>
<source src="/videoLibrary/data/video/Battery.mp4" type='video/mp4' />
</video>
Things look like I want on the desktop browsers but ios/android are dropping a play button in.
At this time it doesn't look like there's a way to hide the play button.
videoplayer.bigPlayButton.hide();
Is there a way to use something like this:
<video width="320" height="240" controls="controls">
<source src="http://www.youtube.com/v/YJp7tqRyJAI" type="video/mp4" />
<source src="http://www.youtube.com/v/YJp7tqRyJAI" type="video/ogg" />
Your browser does not support the video tag.
</video>
I've looked into the api and all I've found is that i can use an iframe which embeds a flash version... But on Google I've found people wondering how to build a custom ui or an autoplay feature with the html5-youtube-api...
http://www.filsh.net/ did the job!