认识达内从这里开始

认真做教育专心促就业

html5 Canvas视频弹幕这样效果，你决定不敢相信!

发布：青岛达内
来源：互联网
时间：2017-12-05 16:34

    1、创建一个数组,用来放消息,这里使用本地消息

    2、检测是否支持视频格式

    3、在画布上面动态添加一个视频

    4、在画布上播放视频

5、显示弹幕消息

<a style='color:blue' href='http://qd.tedu.cn/'>青岛达内</a>培训

    完整代码如下:

    <script type="text/javascript">

    window.addEventListener("load", eventWindowloaded, false);

    var videoElement;

    var videoDiv;

    function eventWindowloaded() {

    videoElement = document.createElement("video");//增加video元素

    videoDiv = document.createElement("div");//增加div元素

    document.body.appendChild(videoDiv);//向画布上添加div元素

    videoDiv.appendChild(videoElement);//向div元素中添加video元素

    videoDiv.setAttribute("style", "display:none"); //给div元素添加影藏的属性

    var videoType = supported(videoElement);//检查视频格式

    if (videoType == "") {//当视频格式返回为空是执行的事件

    alert("没有支持的视频格式");

    return;

    }

    //添加事件监听:当视频加载完毕执行的函数

    videoElement.addEventListener("canplaythrough", videoLoaded, false);

    //给视频添加视频文件

    videoElement.setAttribute("src", "../video/happyfit2." + videoType);

    }

    function supported(video) {

    var returnExtension = "";

    if (video.canPlayType("video/webm") == "probably" ||

    video.canPlayType("video/webm") == "maybe") {

    returnExtension = "webm";

    }else if (video.canPlayType("video/mp4") == "probably" ||

    video.canPlayType("video/mp4") == "maybe") {

    returnExtension = "mp4";

    }

    else if (video.canPlayType("video/ogg") == "probably" ||

    video.canPlayType("video/ogg") == "maybe") {

    returnExtension = "ogg";

    }

    return returnExtension;

    }

    function canvasSupport() {

    return Modernizr.canvas;

    }

    function videoLoaded() {

    canvasApp();

    }

    function canvasApp() {

    if (!canvasSupport) { return; }

    var thecanvas = document.getElementById("sanjiaotop");

    var context = thecanvas.getContext("2d");

    function drawScreen() {

    context.fillStyle = "#f7f7f7";

    context.fillRect(0, 0, 600, 500);

    context.drawImage(videoElement, 0, 0);

    for (var i = 0; i < messages.length; i++) {

    var temp = messages[i];

    if (videoElement.currentTime > temp.time) {

    context.fillStyle = "red";

    context.font = "bold 26px sans";

    context.fillText(temp.message, temp.x, temp.y);

    }

    }

    }

    var messages = new Array();

    messages[0] = { time: 3, message: "欢迎关注我哦!", x: 90, y: 50 };

    messages[1] = { time: 3, message: "我会更努力创作的!", x: 90, y: 100 };

    videoElement.play();

    function gameLoop() {

    window.setTimeout(gameLoop, 20);

    drawScreen();

    }

    gameLoop();

    }

</script>

本篇文章是有青岛Java培训班为您呈现，希望给您带来更多更好的文章，喜欢的朋友们可以加微信公众号哟。

更多青岛达内培训相关资讯，请扫描下方二维码