html5实现视频播放<video>

最新推荐文章于 2021-06-04 08:22:38 发布

原创最新推荐文章于 2021-06-04 08:22:38 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

Javascript 同时被 2 个专栏收录

41 篇文章

订阅专栏

JS成品代码

17 篇文章

订阅专栏

本文介绍了如何使用HTML5的<video>元素实现视频播放功能，包括支持不同浏览器的视频格式、视频元素的属性、方法和事件，以及如何处理浏览器不支持HTML5播放的情况。此外，还提到了通过canPlayType方法判断浏览器是否能播放特定文件类型，并给出了加载和播放视频的JS示例。

注意：

1.关于视频格式，不同浏览器支持的不一样，safari--mp4 chrome--webm firefox opera--ogv，ie8或更早的浏览器不支持

2.语句详解 <video id="video" poster="images/prerollposter.jpg" width="480" height="360" controls>
<source src="video/preroll.mp4">
<source src="video/preroll.ogv">
<source src="video/preroll.webm">
<p>Sorry, your browser doesn't support the video element</p>
</video>

3.如果希望增加flash插件，以处理浏览器不支持html5播放的情况，可以 <video>xxxxx <object>flash code</object> </video>

4.video元素API的一些常用属性方法和事件

5.可以利用类似ended的事件，来添加播放列表

var video; video = document.getElementById("video");

video.addEventListener("ended", nextVideo, false); //增加监听事件,继续nextVideo函数

6.canPlayType 方法，可以让浏览器判断是否可以播放的文件类型

video.canPlayType("video/mp4"); //video目录下mp4格式，会返回两个值，空字符串表示不可能，maybe表示也许

video.canPlayType('video/mp4; codecs="theora, vorbis"'); //如果增加了编解码器的具体类型，则有可能会多出一个返回值， probably最后可能

6.使用加载和play在js里

video.load();
video.play();

完整代码：

var position = 0;
var playlist;
var video;
window.onload = function()
{
    playlist = ["video/preroll", "video/areyoupopular", "video/destinationearth"];  //增加播放列表
    video = document.getElementById("video");
    video.addEventListener("ended", nextVideo, false); //增加监听事件
    video.src = playlist[position] + getFormatExtension(); //添加文件名
    video.load();
    video.play();
};


function nextVideo ()  //下一个视频函数
{
    position++;
    if (position >= playlist.length)
    {
        position = 0;
    }
    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}


function getFormatExtension()  //格式判断函数
{
    if (video.canPlayType("video/mp4") != "")
    {
        return ".mp4";
    }
    else if (video.canPlayType("video/webm") != "")
    {
        return ".webm";
    }
    else if (video.canPlayType("video/ogg") != "")
    {
        return ".ogg";
    }
}
 /**
 * Created by andrewlee on 13-11-5.
 */

<!doctype html>
<html lang="en">
<head>
<title>Webville TV</title>
<meta charset="utf-8">
<link rel="stylesheet" href="webvilletv.css">
    <script src="webvilletv.js"></script>
</head>
<body>


<div id="tv">


<div id="tvConsole">
<div id="highlight">
<img src="images/highlight.png" alt="highlight for tv">
</div>


<!--
<div id="videoDiv">
<video controls
poster="images/prerollposter.jpg"
id="video" 
src="video/preroll.mp4" 
width="480" height="360">
</video>
</div>
-->


<div id="videoDiv">
<video id="video"
poster="images/prerollposter.jpg" 
width="480" height="360" 
controls>
            <!--
        <source src="video/preroll.mp4">
        <source src="video/preroll.ogv">
        <source src="video/preroll.webm">
            -->
        <p>Sorry, your browser doesn't support the video element</p>
</video>
</div>
</div>




</div> <!-- tv -->




</body>
</html>