很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况：

发现video标签在网页中播放时只有声音但是没有图像，如：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <link rel="stylesheet" href="">

</head>

<body>

    <video src="Michael Jackson - One More Chance . MV.mp4" autoplay="autoplay" loop="loop" controls="controls"></video>

</body>

</html>

那么如何来解决这个问题呢

首先要注意的是

你所使用的browser是不是支持html5的

其次就是注意video的播放的源文件，也就是视频文件的编码，mp4的编码要是H.264的才可以

，当这两个问题都保证的情况下你再看看video的问题是不是没了。。

关于HTML5中video标签的奇怪现象的更多相关文章

  1. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  2. HTML5中video标签与canvas绘图的使用

    video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...

  3. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  4. html5 中video标签属性

      <video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  7. 测试开发之前端——No2.HTML5中的标签

    HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...

  8. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  9. HTML5中<template>标签的详细介绍

    HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...

随机推荐

  1. VMware 锐捷 NAT模式的服务自动关闭的解决办法

    之前一直搞不定VMware和锐捷的问题,校园网,你懂的. 后来发现,使用NAT模式联网时,锐捷会间隔性地终结windows系统的那个关于NAT联网的服务,你可以在计算机管理 - 服务,找到一个写有NA ...

  2. EF框架step by step(7)—Code First DataAnnotations(1)

    Data annotation特性是在.NET 3.5中引进的,给ASP.NET web应用中的类提供了一种添加验证的方式.Code First允许你使用代码来建立实体框架模型,同时允许用Data a ...

  3. uva 11636

    #include <cstdio> #include <cstring> #include <iostream> using namespace std; int ...

  4. 测试你是否和LTC水平一样高[HDU1407]

    测试你是否和LTC水平一样高Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. ccc progressbar

    cc.Class({ extends: cc.Component, properties: { progressBar: { default:null, type:cc.ProgressBar }, ...

  6. python 代码片段23

    #coding=utf-8 #python还支持动态的实力属性,即那些没有在类定义里生命的属性, #可以"凭空"创造出来 john.tatto='Mom' #继承 class Em ...

  7. 基于Theano的DL的开源小框架：Dragon

    Link:https://github.com/neopenx/Dragon 起因 最近看了Hinton的Dropout,发现原来的乱代码只能在Softmax层前面加Dropout.索性把整个Thea ...

  8. HDU 3074 (线段树+模P乘法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3074 题目大意:单点更新.维护序列乘法.mod 1000000007. 解题思路: 10000000 ...

  9. 目前quanben评十大哲学家

    排名分先后,包含时间.地区和主要正面成就以及其他代表人物. 1. 伊曼努尔·康德:十八世纪:东普鲁士:理性的界限,现象和本体分立以及主体的地位2. 柏拉图:公元前三四百年:古希腊:理想(念)世界3. ...

  10. android NDK入门 windows下安装cygwin

    一.Android NDK环境简介 Android NDK 是运行于Android 平台上的Native Development Kit 的缩写. Android 应用开发者可以通过NDK 调用C 或 ...