HTML编辑器插入视频的笔记

昨天的文章中想插入SSL介绍视频,刚开始不会用编辑器的。
网上找到的代码复制进编辑器也没产生变化。
只到后来 安和Blog 告诉我如何在编辑器中使用html代码要加!!!我才知道。
为了以后更好的应用,我简单的学习了下 html video 播放视频的代码
下面是我的笔记内容以及一个实操视频。


本站采用的文章编辑器是传统WEB编辑器,支持web代码直接输入,下面是个演示

    !!!
    <videosrc="视频地址" controls="controls" width="100%" height="100%">您的浏览器不支持播放该视频!</video>
    !!!

基础指南:

表示你要播放test.mp4视频

     <videosrc="test.mp4"controls></video>

width和height设置视频窗口大小

    <videosrc="hangge.mp4"controlswidth="400"height="300"></video>

当值为100%的时候是自适应环境大小

进阶指南

设置视频自动下载

    <videosrc="test.mp4"controlspreload="none"></video>

设置controlspreload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:
(1)auto:让浏览器自动下载整个文件 。
(2)none:让浏览器不必预先下载文件 。
(3)metadata:让浏览器先加载视频的前帧,生成预览图。


设置自动播放属性

    <videosrc="test.mp4"controlsautoplay></video>

(1)使用autoplay可以让浏览器加载完视频文件后立即播放。

    <videosrc="test.mp4"controlsautoplaymuted></video>

(2)自动播放后加上muted。这样自动播放时会静音。

    <videosrc="hangge.mp4"controlsloop></video>

(3)使用loop属性让视频播放结束时,再从头开始播放。

设置封面背景

    <videosrc="hangge.mp4"controlsposter="hangge.png"></video>

设置替换视频的图片(封面图片) 通过poster属性可以设置


设置兼容性

现在大部分浏览器都能支持H.264格式的视频,但总有一些小众浏览器不支持。
需要通过后备措施保证更多设备都能看到视频

利用<source>设置多种播放格式

不使用src属性,而是在其内部嵌套一组<source>元素。
浏览器会选择播放第一个它所支持的文件。
可以添加WebM格式的视频提供对老式浏览器的支持。

    <video controls>
    
        <source src="hangge.mp4"type="video/mp4">    #第一种播放方式为H264
    
        <source src="hangge.webm"type="video/webm">  #第二种播放方式为webm
    
    </video>

添加Flash后备措施(推荐)

添加多种格式播放那个方法我个人不推荐大家去用,毕竟大家目前用的浏览器都比较高端。
使用Flash作为备用播放方案比较合适,Flash兼容IE8连<video>元素都不支持的老浏览器。

    <video controls>
    
        <source src="hangge.mp4"type="video/mp4">
    
        <source src="hangge.webm"type="video/webm">
    
       
            <object id="flowplayer" width="400" height="300"
    
            data="flowplayer-3.2.18.swf"
    
            type="application/x-shockwave-flash">
    
            <param name="movie"value="flowplayer-3.2.18.swf">
    
            <param name="flashvars"value='config={"clip":"hangge.mp4"}'>
    
        </object>
    
    </video>

优先使用Flash作为首选播放器

以前大多数网站都这么做是因为Flash普及率比较高,HTML5作为后备兼容,
但是时代在进步,新出的谷歌浏览器开始停用Flash支持,现在H5的发展比较快。

        <object id="flowplayer" width="400" height="300"
        
            data="flowplayer-3.2.18.swf"
        
            type="application/x-shockwave-flash">
        
            <paramname="movie"value="flowplayer-3.2.18.swf">
        
            <paramname="flashvars"value='config={"clip":"hangge.mp4"}'>
        
         
        
            <videocontrols>
        
                <sourcesrc="hangge.mp4"type="video/mp4">
        
                <sourcesrc="hangge.webm"type="video/webm">
        
            </video>
     </object>

以上就是我个人对 WEB 播放器 代码的使用的学习笔记,还是挺符合我实际使用的。