首页 > 软件开发 > JQUERY >

如何替换video中的src

来源:互联网 2023-03-17 00:49:01 410

在HTML5中,新增一个功能---视频video,可以插入视频路径并进行播放。那么,如何替换video中的src并且让视频可以播放呢?EAx办公区 - 实用经验教程分享!

如何替换video中的srcEAx办公区 - 实用经验教程分享!

工具/原料

  • HTML5
  • jquery
  • JavaScript
  • 截图工具
  • WPS
  • HBuilderX
  • 浏览器

方法/步骤

  • 1

    在HBuilderX新建的Web项目中,新建一个静态页面video.htmlEAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 2

    打开已新建的页面,然后引入jquery核心文件,修改对应title标签内容EAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 3

    由于要使用到视频,拷贝两个视频到项目的data文件夹下EAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 4

    在body标签元素内,插入一个video和button元素,使用按钮控制替换video元素的srcEAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 4此文章未经授权抓取自百度经验
  • 5

    添加一个script标签,并添加按钮点击事件,直接替换source的src;结果发现替换不成功EAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 6

    返回到HBuilderX工具,修改按钮点击事件,利用JavaScript方法获取video元素,并修改src并调用play()EAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 7

    再次保存代码并刷新浏览器,然后点击替换按钮,结果发现视频切换了EAx办公区 - 实用经验教程分享!

    如何替换video中的srcEAx办公区 - 实用经验教程分享!

  • 总结

    • 1、新建Web项目EAx办公区 - 实用经验教程分享!

      2、新建页面文件EAx办公区 - 实用经验教程分享!

      3、插Video元素EAx办公区 - 实用经验教程分享!

      4、引入jQueryEAx办公区 - 实用经验教程分享!

      5、添加按钮事件EAx办公区 - 实用经验教程分享!

      6、保存查看效果EAx办公区 - 实用经验教程分享!

      如何替换video中的srcEAx办公区 - 实用经验教程分享!

    注意事项

    • 注意HTML5中的video元素的用法
    • 注意调整video元素的宽度

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!EAx办公区 - 实用经验教程分享!


    标签: JAVASCRIPTJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码