h5html5视频播放器
Let's all be honest: when it comes to media and the early days of the internet, we definitely did it all wrong. We started with embedded video players like RealPlayer and Windows Media Player which required custom codecs and browser plugins, then moved on to Flash and Quicktime -- all of which made our browsers slow and sometimes even at risk from a security perspective. It took more than a decade to create a <video> tag and actually get browser support for it -- far too long of a wait, so much so that many sites still use Flash to serve their videos.
坦白讲，在媒体和互联网发展初期，我们肯定做错了一切。 我们从诸如RealPlayer和Windows Media Player之类的嵌入式视频播放器开始，这些视频播放器需要自定义编解码器和浏览器插件，然后转向Flash和Quicktime-所有这些使我们的浏览器运行缓慢，有时甚至从安全角度来看也处于危险之中。 创建<video>标签并真正获得浏览器支持花费了十多年的时间-等待时间太长，以至于很多站点仍然使用Flash来提供视频。
All that said, the majority of the web is now using <video> and you can tell -- less browser crashes, less memory uxsed, and smoother playback. Let's have a look at basic and more advanced <video> usage as well as some best practice tips. We'll take advantage of Cloudinary's HTML Video Player tools and Cloudinary's awesome API for help along the way too!
综上所述，大多数网络现在都在使用<video> ，您可以看出-更少的浏览器崩溃，更少的辅助内存和更流畅的播放。 让我们看一下基本的和更高级的<video>用法，以及一些最佳实践技巧。 我们还将利用CloudinaryHTML Video Player工具和Cloudinary的出色 API来提供帮助！
基本<video>用法 (Basic <video> Usage)
Let's look at an example of <video> page usage and follow what's going on:
让我们看一个<video>页面用法的示例，并了解发生的情况：
<video width="640" height="480" poster="sample-video.jpg" controls autoplay preload>
<source src="sample-video.webm" type="video/webm">
<source src="sample-video.ogv" type="video/ogg">
<source src="sample-video.mp4" type="video/mp4">
<track src="subtitles-en.vtt" kind="subtitles" srclang="en"
label="English" default>
<track src="subtitles-fr.vtt" kind="subtitles" srclang="fr"
label="French">
</video>
Most <video> elements will use the following attributes:
大多数<video>元素将使用以下属性：
width: The width of the<video>elementwidth：<video>元素的宽度height: The height of the<video>elementheight：<video>元素的高度poster: The representative image of the video, shown while the video loadsposter：视频的代表性图片，在视频加载时显示controls: Whether or not the browser's native controls should be shown (in case you prefer to create your own)controls：是否应显示浏览器的本机控件(以防您创建自己的控件)preload: Whether or not to preload the videopreload：是否预加载视频autoplay: Whether or not to autoplay the videoautoplay：是否自动播放视频
Within the <video> element will typically be:
在<video>元素内通常是：
source: Elements that provide the source and source type of video files, ordered by preference of supportsource：提供视频文件的源和源类型的元素，按支持的优先级排序track: Subtitles for said video (optional, of course)track：所述视频的字幕(当然是可选的)
<video>方法和属性：
On the JavaScripts side, we have a few methods to manage the <video> element:
在JavaScript方面，我们有几种方法来管理<video>元素：
load: Reloads the videoload：重新加载视频play: Plays the videoplay：播放视频pause: Pauses the videopause：暂停视频
And while there are many events and properties, these are the most used:
尽管有许多事件和属性，但最常用的是：
durationdurationpausedpausedcurrentTimecurrentTimevolumevolume
将Cloudinary用于<video> (Using Cloudinary for <video>)
Cloudinary provides a full upload to deliver API for videos. Let's start by uploading the video with the Node.js API:
Cloudinary提供了完整的上传，以提供视频API。 让我们从使用Node.js API上传视频开始：
cloudinary.uploader.upload('sample-video.mp4', function(result) {
// Callback
console.log('result: ', result);
}, {
public_id: 'sample-video',
resource_type: 'video'
});
Once the video has been uploaded, Cloudinary generates WEBM, MP4, and OGV versions of your video for optimal delivery, as well as a poster image. With the video up on Cloudinary's server, you can use the following to get the video HTML:
上载视频后，Cloudinary会生成视频的WEBM，MP4和OGV版本以实现最佳交付，并生成海报图像。 在Cloudinary的服务器上播放视频后，您可以使用以下方法获取视频HTML：
cloudinary.video('sample-video');
/*
<video poster='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.jpg'>
<source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.webm' type='video/webm'>
<source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4' type='video/mp4'>
<source src='http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.ogv' type='video/ogg'>
</video>
*/
You can use a second argument to customize the video and poster:
您可以使用第二个参数来自定义视频和海报：
cloudinary.video('sample-video', {
width: 640,
height: 480,
autoplay: true,
poster: {
transformation: [
{ width: 1850, crop: "scale" },
{ overlay: "movie_curtain_overlay_new"},
{ overlay: "text:Courier_80_bold:Once%20upon%20a%20time...",
gravity:"north", y: 60 },
{ start_offset: 36 }
]
}
})
Cloudinary makes implementing a HTML5 video player very easily!
Cloudinary使实施HTML5视频播放器变得非常容易！
最佳做法和提示 (Best Practices and Tips)
Be careful with the
autoplayattribute -- a page mainly created for a video makes sense, but an advertisement or sidebar item? You'll make visitors upset quickly!请注意
autoplay属性-主要为视频创建的页面很有意义，但是广告或侧边栏项目呢？ 您会很快使访客烦恼！- Use a CDN -- load speed matters! 使用CDN-加载速度很重要！
- Offer both standard (MP4) and edge source file types (WEBM) -- you reward users who have a client with advanced compression and quality capabilities (WEBM), but provide a fallback to widely supported formats (MP4s). 同时提供标准(MP4)和边缘源文件类型(WEBM)-您奖励拥有高级压缩和质量功能(WEBM)的客户端的用户，但回退到广泛支持的格式(MP4)。
- If you create custom control elements, be sure to make them large enough that they're reasonable tap targets for mobile! 如果创建自定义控件元素，请确保使其足够大，使其成为移动设备的合理点击目标！
HTML5 video players started out simple but have grown quite advanced (think YouTube), and since it's all just HTML, CSS, and JavaScript, any front-end developer can create an impressive HTML5 video player. There are probably many more people out there who've pushed HTML5 video to its limits, so please post any further tips or examples of your work!
HTML5视频播放器起初很简单，但是已经变得相当先进(想想YouTube)，而且由于它们都是HTML，CSS和JavaScript，因此任何前端开发人员都可以创建令人印象深刻HTML5视频播放器。 可能还有更多的人将HTML5视频推到了极限，因此请发布任何其他提示或工作示例！
h5html5视频播放器
5600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
