首页 网络技术
  1. 正文

怎么用html代码在网页中播放视频

本站采用的文章编辑器是传统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>

本文标题:怎么用html代码在网页中播放视频
本文链接:https://www.qqooo.cn/post/1516.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 feelym@88.com 处理,谢谢!