在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:paypal/accessible-html5-video-player开源软件地址:https://github.com/paypal/accessible-html5-video-player开源编程语言:JavaScript 65.7%开源软件介绍:Accessible HTML5 Video PlayerWhat is it?A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For details, read the blog post Introducing an Accessible HTML5 Video Player on the PayPal Engineering blog (updated link). Also see 7 Lessons from Developing an Accessible HTML 5 Video Player. Features
ImplementationCSS and ImageInsert the CSS in the Head of your HTML document. You'll also need to upload the sprite image (or use your own) and adjust the path in the CSS file. <link rel="stylesheet" href="/css/px-video.css" /> HTMLInsert the HTML5 video markup in the Body of your HTML document. Replace the video, poster, and caption URLs. Modify the sizes of video and fallback image as needed. <div class="px-video-container" id="myvid">
<div class="px-video-img-captions-container">
<div class="px-video-captions hide" aria-hidden="true"></div>
<video width="640" height="360" poster="media/foo.jpg" controls>
<source src="foo.mp4" type="video/mp4" />
<source src="foo.webm" type="video/webm" />
<track kind="captions" label="English captions" src="media/foo.vtt" srclang="en" default />
<div>
<a href="foo.mp4">
<img src="media/foo.jpg" width="640" height="360" alt="download video" />
</a>
</div>
</video>
</div>
<div class="px-video-controls"></div>
</div> JavaScriptInsert two JavaScript files right before the closing Body element of your HTML document. Add a Script element to initialize the video. Options are passed in
<script src="js/strings.js"></script>
<script src="js/px-video.js"></script>
<script>
// Initialize
new InitPxVideo({
"videoId": "myvid",
"captionsOnDefault": true,
"seekInterval": 20,
"videoTitle": "clips of stand-up comedy",
"debug": true
});
</script> View DemoReact VersionThe React version has been designed to be integrated into your react codebase easily. The video React component is named <PXVideo
sources={[
'https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4',
'https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.webm'
]}
caption={{
label: 'English captions',
source: 'media/captions_PayPal_Austin_en.vtt',
lang: 'EN',
default: true
}}
poster="media/poster_PayPal_Austin2.jpg"
width="640"
height="360"
controls={true}
id="myvid"
fallback={true}
seekInterval={20}
debug={true}
/> A demo could be reached at: View Demo Development
Feedback and ContributionsIf you experience any errors or if you have ideas for improvement, please feel free to open an issue or send a pull request.
Authors/Maintainer
Browser Support
Limitations and Known Issues
Related Resources
Projects influenced by the PayPal Accessible HTML5 Video Player
Copyright and LicenseCopyright 2019, PayPal under the BSD license. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论